延迟加载带有优雅降级的图像(JavaScript)

Lazy loading of images with graceful degradation (JavaScript)

本文关键字：图像 JavaScript 降级 延迟加载      更新时间：2023-09-26

考虑一个带有一堆标签的HTML页面，每个标签都有自己的内容。我想将每个标签转换为JavaScript支持的幻灯片中的幻灯片。每个标签都可以包含图像，并且应该在这个幻灯片中延迟加载。我不希望所有的图片一次加载。

另一方面，没有启用JavaScript的用户和搜索引擎应该只看到标记和所有图像。当启用JavaScript时，如何避免图像加载，以及如何确保在未启用JavaScript时加载图像?

一种方法是用以下格式替换所有图像:

<img src="" data-src="myimage.png">

这个解决方案的问题是没有优雅的降级。

相反，我必须这样做:

<img src="myimage.png">

这样做的问题是，您无法阻止浏览器加载HTML页面中的所有图像。当文档准备好时，我尝试用几种方法修改HTML。例如，将图像中的所有src属性替换为data-src，清空整个body等等。

我真的要牺牲优雅的退化吗?

最简单的方法可能是复制<noscript>标记中包含的图像标记并使用它们的src属性。以上或以下，你可以有自定义的data-src属性相同的标签，检测和延迟加载它们与Javascript。

可以同时包含两个版本:

<img src="" data-src="myimage.png">
<noscript>
  <img src="myimage.png">
</noscript>

可能很好地将单独的<img>标记关联在那里，以便您的JavaScript代码可以保持它们同步。例如:

<img src="" class='lazy' data-master="myimage">
<noscript>
  <img id="myimage" class='super-sized interesting' src="myimage.png">
</noscript>

然后你的JS代码可以确保"脚本"图像拾取类等，这样你就不必手动保持两个版本更新(原谅jQuery的例子;当然，你可以这样做，但你想):

$('img.lazy').each(function() {
  var $lazy = $(this),
    master = $('#' + $lazy.data('master'))[0];
    $lazy.src(master.src);
    $lazy.className += master.className;
    // etc
});
相关文章：