javascript延迟加载渐进增强方式？

Question

我正在为画廊所有者建立一个网站,每个网页都有很多图片.因此,我想懒得加载网页上的图像,使初始加载不那么沉重.但是,我想以"渐进增强"的方式实现这一点.

我发现了很多延迟加载方法,但它们都需要摆弄html代码,这样网页在关闭javascript时就没用了.(例如src,img标签的属性保持未设置,直到图像被延迟加载).

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

防止浏览器获取图像,即使它们在页面上,但只在javascript打开时才这样做(所以在非JavaScript浏览器上,图像仍然正常加载).这应该在不改变html的情况下完成.
保存src属性在data-src属性
向下滚动时会连续加载图像

在这三个步骤中,第一个步骤似乎是最难的步骤.即使这个stackoverflow讨论也没有提供一个不会破坏渐进增强的答案.

有没有人有任何想法？

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内的标签一样,当javascript不可用时noscript,此style块仅对浏览器可见.

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

我认为无论如何我都可以使用javascript 将该src属性从noscript块中删除.但是,这是不可能的:javascript无法访问noscript块的内容.因此,上述方案是我能提出的最有效的方案.