html，仅在等待图像时使页面显示就绪（没有选项卡旋转轮）

Question

我有一个页面可以加载来自各种来源的图像。 有时，这些图像无法加载； 也许链接已失效或其他原因。 没关系。

让我困扰的是，浏览器可能需要6秒钟甚至更长的时间（我看过20秒钟）才能确定图片无法加载。 在这段时间内，Chrome标签页中不断旋转的加载轮不断旋转，似乎我的页面尚未准备好。

我已将JavaScript加载从onload切换为$（document）.ready（），因此在等待图像加载时，至少我的页面处于非活动状态。 但是看起来好像是这样。

但是，当所有图片都在等待图像时，是否可以通过某种方式使我的页面显示为“就绪”（没有旋转轮）？ 也许是加载图像的另一种方法？ 我目前将img元素与src一起使用。 还是让它早日放弃的方法？ 确定图像链接已失效真的需要6秒钟吗？

不知道这是否有解决方案。 我在很多网站上都看到过这个问题，不仅是我的，而且让我发疯。 我会经常单击stop-loading-x来使其停止！ 我至少希望自己的网站不是那样。

Answer 1

根据我的测试，Chrome中的加载指示器未显示由Javascript触发加载的图像元素。 因此，如果您不介意在禁用javascript的情况下无法加载图片，则可以发送未设置src的img ，并在页面加载时进行设置。 您可以将URL存储在data-src 。 有利的一面是，然后， 当图像加载，如果你愿意，你可以控制（虽然你可能想使用插件，像Roullie的答案建议）。

---

<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">

...

$(document).ready(function(){
  $(".async-img").each(function(){
    this.src = $(this).data("src");
  })
})

Answer 2

也许可以帮上忙。 lazyload.js