javascript 懒加载的渐进增强方式？

Question

我正在为画廊所有者构建一个网站，每个网页都有很多图片。因此我想延迟加载网页上的图像，进行初始加载不那么重。但是，我想以“渐进增强”的方式实现这一点。

我找到了很多懒加载的方法，但是都需要摆弄html代码以这种方式，网页将在关闭javascript的情况下无用。 (例如，img 标签的 src 属性保持未设置，直到图像被延迟加载)。

要逐步实现延迟加载方法，我认为需要以下内容:

1. 阻止浏览器获取图像，即使这些图像在页面上，但只有在 javascript 打开时才这样做(所以在非 javascript 浏览器上，图像仍然正常加载)。这应该在不改变 html 的情况下完成。
2. 将 src 属性保存在 data-src 属性中
3. 向下滚动时依次加载图片

在这三个步骤中，第一步似乎是最难的。连this stackoverflow discussion没有提供不破坏渐进增强的答案。

有人有什么想法吗？

Answer 1

由于没有人给出答案，我将发布我找到的合理解决方案。

这个问题归结为以下几点:虽然我们想要阻止浏览器在打开 javascript 时下载图像，但我们必须确保图像已下载当 javascript 关闭或不可用时。

很难始终如一地使用 javascript 在页面上停止加载图像在“正常”格式中:

<img src="path/to/image.jpg"></img>

要停止下载图片，我们必须删除它们的 src 属性，但为了为此，应该已经加载 DOM。随着现在许多浏览器的优化，很难保证图像没有下载。

最重要的是，我们当然希望防止中断已经下载的图像，因为这简直是一种浪费。

因此，我选择使用如下方案:

<img data-src="path/to/image.jpg" class="lazy"></img>
<noscript>
    <img  src="path/to/image.jpg"></img>
</noscript>

请注意 noscript 标签之外的图像没有 src 而是一个 data-src 属性。例如，延迟加载脚本可以使用它来一张一张地加载图像。

只有当javascript不可用时，noscript里面的图片才会被屏蔽是可见的，所以不需要加载 .lazy 图像(也没有办法这样做，因为JavaScript 不可用)。

不过我们确实需要隐藏图像:

<noscript>
    <style>
        .lazy {
            display: none;
        }
    </style>
 </noscript>

与 noscript block 中的 img 标签一样，此 style block 仅在 javascript 不可用时对浏览器可见。

相关说明:我认为我可以通过根本不在惰性图像上放置 src 或 data-src 属性来减小 html 大小。这很好，因为它消除了页面中多余的 url，为我们节省了一些带宽。

我认为无论如何我都可以使用 javascript 从 noscript block 中提取 src 属性。然而，这是不可能的:javascript 无法访问 noscript block 的内容。因此上述方案是我能想到的最有效的方法。