jquery - 加载图像时替换损坏的图像图标

Posted 2023-03-05

【中文标题】jquery - 加载图像时替换损坏的图像图标

【英文标题】：jquery - replace broken image icon while image is loading

【发布时间】：2015-12-11 08:52:23

【问题描述】：

我有一个包含许多<img> 标记列表的页面。所以加载所有图像需要很长时间。在加载任何图像之前，我看到损坏的图像图标。我想在加载图像时替换损坏的图像。我测试了this answer，但它只是在发生错误时才起作用。无论如何用 javascript 或 jquery 来做这件事吗？

【问题讨论】：

尝试添加CSS like img background: url('someimage.jpg') no-repeat;

绑定函数onerror是你最好的选择。

@GuruprasadRa 不能用 javascript 做吗？

听起来更像是一个性能问题。如何加载大量图像。在我看来，最好的解决方案是在用户向下滚动页面时延迟加载图像。 data 属性将包含实际图像的路径，而 src 属性将包含小型加载 gif 的路径。当用户向下滚动并看到图像时，数据属性会将加载的 gif 替换为实际图像。这通过不一次加载所有图像来提高性能。我喜欢luis-almeida.github.io/unveil

在这个帖子中找到几个好的答案，图片占位符是个好主意：***.com/questions/1970569/…

【参考方案1】：

我在 GitHub 上找到了一个很好的解决方案。只需使用下面的 CSS 代码：

img[src=""],
img:not([src]) 
  visibility: hidden;

链接：https://github.com/wp-media/rocket-lazy-load/issues/60

【讨论】：

非常好的一个:)

【参考方案2】：

您可以加载占位符图片，但您必须加载该图片（当您已经在加载另一张图片时）。如果您通过GET 请求加载微调器之类的东西，那应该没问题，因为您可以从服务器设置缓存标头，因此浏览器实际上不会对该加载图像发出任何其他请求。 Pinterest 解决此问题的一种方法是在加载图像时在邮箱中加载纯色和每个帖子的标题，但现在我们正在进入设计讨论。给猫剥皮的方法有很多种。

关于加载多张图片，您必须了解几个注意事项：

获取和下载图像所需的时间。 解码此图像所需的时间。 您可以在一个页面上打开的最大并发套接字数。

如果您没有大量需要预先加载的图像，考虑 3 通常不是问题，因为您可以乐观地在折叠下加载图像，但如果您有 100 张页面上的图像需要快速加载以获得良好的用户体验，那么您可能需要找到更好的解决方案。为什么？因为您要在服务器上产生 100 次额外的往返行程，所以只需加载每个图像，这构成总加载光谱的一小部分（光谱是 100 幅图像）。不仅如此，您还会被浏览器限制，即有 X 个并发请求来获取这些图像。

如果您有许多小图像，您可能希望采用类似于 Dropbox describes here 的方法。基本要点是您对多个缩略图发出一个巨大的请求，然后返回一个分块的编码响应。这意味着响应中的每个数据包都将包含每个缩略图的有效负载。通常这意味着您将返回有效负载的 base64 编码版本，这意味着，尽管您将到服务器的往返次数减少到可能只有一次，但您将有更多的数据要传输到客户端（浏览器），因为有效负载的字符串表示将大于二进制表示。另一个问题是，如果不使用IndexedDB 之类的内容，您将无法再安全地在浏览器上缓存此请求。当您将每个 img 标记的背景图像设置为 base64 字符串时，还会产生解码成本，因为浏览器现在必须将字符串转换为二进制，然后让 img 标记将其解码为任何文件格式（而不是当您请求图像并获得二进制响应时，完全跳过base64->binary 步骤）。

【参考方案3】：

您可以使用占位符图片，它的重量非常轻，并使用它来代替每张图片。

在加载页面的同时，您可以加载隐藏 div 中的所有图像。 然后在准备好文档时，您可以用 jQuery 替换所有图像。

例如

html

<img src="tiny_placeholder_image"  data-src="original_image_src"/>
<!-- upto N images -->


<!-- images are loading in background --> 
<div style="display:none">
   <img src="original_image_src" />
   <!-- upto N images -->
</div>

JavaScript

(function($)
    // Now replace all data-src with src in images. 
)(jQuery);