HTML，使页面看起来准备就绪(没有选项卡旋转轮），而只是等待图像

html, make page appear ready (no tab spinning wheel) while just waiting for images

本文关键字：旋转 图像 等待 看起来 准备就绪 HTML 选项      更新时间：2023-09-26

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

令我困扰的是，浏览器可能需要 6 秒甚至更长时间（我已经看到 20 秒）才能确定图像加载失败。在此期间，Chrome 标签中的旋转加载轮一直在运行，使我的页面看起来还没有准备好。

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

但是，有没有办法让我的页面在等待图像时看起来"准备好"（没有纺车）？也许是另一种加载图像的方法？我目前将 img 元素与 src 一起使用。还是让它早点放弃的方法？真的需要 6 秒来决定图像链接已死吗？

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

根据我的测试，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");
  })
})

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

相关文章：