如何防止从头部服务器加载我的真实图像时出现破损的图像

Posted 2021-05-05

我正在使用html，CSS和javascript处理应用程序前端，一切都很好，但在图像加载到标题之前，首先出现损坏的图像图标。

我想添加背景颜色代替损坏的图像，直到原始图像完全加载。

答案

内容完全加载后显示<img>。

<img style='display: none' onload="this.style.display = 'block'" src="...">

如果你使用jQuery

<img style='display: none' id="myImg" onload="$(myImg).show()" src="...">

另一答案

如果在最初呈现页面时未加载图像，则img标签将显示图标。如果你正在使用任何JS，那么你可以做到这一点

1. 将图像标记置于某个条件中，并仅在后台加载图像时显示它（异步调用）。 2直到图像未加载为止隐藏图像标签并使用带有背景颜色的标签或任何其他标签。

另一答案

另一种方法：使用内联svg img占位符，使用ajax请求真正的img然后repace占位符。

内联img

<img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

另一答案

1）用css解决方案是alt =“”。

2）借助java脚本

将此代码放在图像标记中

在图像完全加载之前，这将通过将图像放在背景中来克服错误