Question

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

我发现了很多延迟加载方法，但它们都需要摆弄html代码以这种方式，关闭javascript网页将无用。（例如，src标记的img属性保持未设置状态，直到图像延迟加载为止。

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

阻止浏览器获取图像，即使它们位于页面上，但只有当javascript打开时才这样做（所以在非JavaScript浏览器上，图像仍然存在正常加载）。这应该在不改变html的情况下完成。
将src属性保存在data-src属性
向下滚动时连续加载图像

在这三个步骤中，第一步看起来最难。即使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>

与img块中的noscript标记一样，只有当javascript不可用时，此style块才会对浏览器可见。

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

我认为无论如何我都可以使用javascript从src块中取出noscript属性。但是，这是不可能的： javascript无法访问noscript块的内容。因此，上述方案我能想出的最有效率。