在不使用JS的情况下延迟加载图像

时间:2016-02-03 22:35:53

标签: html html5

我想推迟在HTML文件中加载图片,直到加载所有其他资源或设定的时间。我想在没有JS的情况下这样做。

我已经使用了在我们的网络应用中使用JS的延迟图像加载技术。但是,这个应用程序的一个版本在没有JS的情况下运行,如果可能的话我想拥有相同的功能。我发布了这个希望可能有一些鲜为人知的HTML5属性,我可以用它。欢迎任何解决方法。

加载priotity

如果可能的话,将图像加载到块中会很好。我很好,即使它只是一个块也是如此。

  1. 所有HTML / CSS
  2. 图片块
  3. 图片块
  4. 注意:我已经考虑过只为JS应用程序延迟加载并立即为我的纯HTML版本(as described here)加载图像,这是我的后备。

1 个答案:

答案 0 :(得分:2)

如果您以Chrome浏览器为目标,则Chrome引入了本机图像延迟加载功能,因此您无需为此安装任何其他第三方库。

使用本机图像延迟加载,您应该在loading html标记中添加img属性,如下所示:

<img src="..." loading="lazy" width="200" height="200">

还要确保您安装了最新版本的Chrome浏览器。

有关更多详细信息,请参阅以下参考:https://web.dev/native-lazy-loading#image-loading

希望这会有所帮助。