javascript - 优雅降级的延迟加载图像(JavaScript)

Question

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

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

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

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

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

相反，我必须这样做:

<img src="myimage.png">

问题在于您无法阻止浏览器加载 HTML 页面中的所有图像。文档准备好后，我尝试以多种方式修改 HTML。比如将images中的所有src属性替换成data-src，清空整个body等等。

我真的必须牺牲优雅的降级吗？

提前致谢。

Answer 1

最简单的方法可能是复制包含在 <noscript> 中的图像标签标记并使用他们的 src属性。高于或低于该值，您可以使用自定义的相同标签 data-src使用 Javascript 属性、检测和延迟加载它们。