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

Question

我正在开发一个带有HTML，CSS和JavaScript的应用程序前端，一切都很好但是在图片加载到标题之前，首先会出现损坏的图像图标。

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

Answer 1

如果在最初渲染页面时未加载图像，则img标记将显示图标。如果您正在使用任何JS，那么这就是您可以做的事情

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

Answer 2

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

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

如果您使用的是jQuery

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

Answer 3

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

inline img

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

Answer 4

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

2）借助java脚本

将此代码放入图片标记

在图像完全加载之前，通过将img放在背景中将会出现错误