2

我有一个从各种来源加载图像的页面。有时这些图像无法加载；也许链接已经死了或其他什么。没关系。

困扰我的是浏览器可能需要 6 秒甚至更长的时间（我见过 20 秒）才能确定图像无法加载。在此期间，Chrome 选项卡中的旋转加载轮一直在运转，看起来我的页面还没有准备好。

我已经将我的 javascript 加载从 onload 切换到 $(document).ready() 所以至少我的页面在等待图像加载时没有处于非活动状态。但它可能看起来好像是。

但是，当我的页面所做的只是等待图像时，有什么方法可以让我的页面看起来“准备就绪”（没有旋转的轮子）？也许另一种加载图像的方式？我目前将 img 元素与 src 一起使用。还是有办法让它早点放弃？确定图片链接失效真的需要 6 秒吗？

不确定这是否有解决方案。这是我在很多网站上看到的一个问题，不仅仅是我的，但它让我发疯。我会经常点击 stop-loading-x 让它停止！我至少希望我自己的网站不是那样。

4

2 回答 2

1

根据我的测试，Chrome 中的加载指示器不会显示由 Javascript 触发加载的图像元素。因此，如果您不介意在禁用 javascript 的情况下不加载图像，您可以发送未img设置的图像src，并在页面加载时设置它。您可以将 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");
  })
})
于 2013-09-14T07:35:39.963 回答
0

也许它可以提供帮助。 懒加载.js

于 2013-09-14T07:17:07.603 回答