Question

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

Answer 1

您可以加载占位符图片，但必须加载该图片（当您已加载其他图片时）。如果您通过GET请求加载类似微调器的内容，那应该没问题，因为您可以从服务器设置缓存标头，这样浏览器实际上不会对该加载图像进行任何其他请求。 Pinterest绕过这种方式的方法是在加载图像时在帖子框中加载纯色和每个帖子的标题，但现在我们正在进行设计讨论。皮肤猫的方法有多种。

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

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

如果您没有大量需要预先加载的图像，考虑3通常不是问题，因为您可以乐观地加载图像，但如果您有100s在页面上需要快速加载以获得良好用户体验的图像，然后您可能需要找到更好的解决方案。为什么？因为您需要向服务器进行100次额外的往返行程，所以只需加载每个图像，这些图像占总加载频谱的一小部分（频谱为100个图像）。不仅如此，你还会因浏览器限制X-of并发请求来获取这些图像而感到窒息。

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

Answer 2

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

SELECT [raw_data].[firstdata] 
       + sum(Splitted_Row.value) 
          over (partition by [raw_data].[id] 
               order by CHARINDEX(',' + Splitted_Row.value + ',', ',' + [raw_data].[next_counts] + ',')
FROM [dbo].[raw_data]
CROSS APPLY STRING_SPLIT ([raw_data].[next_counts], ',') Splitted_Row

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

Answer 3

你可以使用占位符图像，它非常轻，并用它来代替每个图像。

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

e.g。

HTML

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


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

的JavaScript

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

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

3 个答案:

HTML

的JavaScript