延迟加载图像并进行适当的降级（JavaScript）

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

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

一种方法是使用此格式替换所有图像：

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

这个解决方案的问题是没有优雅的退化

相反，我必须做：

<img src="myimage.png">

问题是，您无法阻止浏览器加载HTML页面中的所有图像。当文档准备就绪时，我尝试了几种修改HTML的方法。例如，用数据src替换图像中的所有src属性，清空整个正文，等等

我真的要牺牲优雅的堕落吗

---

提前感谢。

最简单的方法可能是复制

标记中包含的图像标记，并使用其

src

属性。在上面或下面，您可以使用自定义的

数据src

属性拥有相同的标记，使用Javascript检测并延迟加载它们。

您可以包括两个版本：

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

---

是的，这绝对是一个有效的解决方案。然而，我担心的是，这是不好的SEO。请参阅此链接：感谢您详尽的回答！正如我对史蒂夫说的，这绝对是一个有效的解决方案。我有点担心关于搜索引擎优化。只要我们不谈论链接，而只谈论图像，这可能不是问题。查看此链接：我查看了参考文章（seroundtable.com/archives/022411.html）。在我看来，noscript标记中的内容可能被认为是可疑的，而不是整个文档。由于您讨论的是同一内容的两种不同表示形式，一种是内部的，另一种是外部的noscript标记，因此这似乎不是问题的原因，下面的答案是正确的。

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

$('img.lazy').each(function() {
  var $lazy = $(this),
    master = $('#' + $lazy.data('master'))[0];

    $lazy.src(master.src);
    $lazy.className += master.className;
    // etc
});