Question

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

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

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

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

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

相反，我必须这样做：

<img src="myimage.png">

问题在于您无法阻止浏览器加载HTML页面中的所有图像。我准备在文档准备好后以几种方式修改HTML。例如，用data-src替换图像中的所有src属性，清空整个身体等等。

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

提前致谢。

Answer 1

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

Answer 2

您可以包含两个版本：

<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代码可以确保“scripty”图像获取类等，这样你就不必手动保持两个版本更新（请原谅jQuery示例;当然你会这样做但是你想）：

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

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

延迟加载具有优雅降级的图像（JavaScript）

2 个答案: