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

Question

我正在为画廊老板建立一个网站，每个网页都有很多图片。因此，我想延迟加载网页上的图像，使最初的负载较轻。不过，我想以“逐步加强”的方式来实施这一点。

我发现了很多延迟加载方法，但它们都需要修改html代码，这样关闭javascript后网页就没用了。（例如，img标记的src属性保持未设置，直到图像延迟加载）。

要逐步实现懒惰加载方法，我认为需要以下内容：

1. 阻止浏览器获取图像，即使页面上有其他图像，但仅在启用javascript时执行此操作（因此在非javascript浏览器上，图像仍按正常方式加载）。这应该在不改变html的情况下完成。
2. 将src属性保存在data src属性中
3. 向下滚动时按顺序加载图像

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

有人有什么想法吗？

Answer 1

不指定src属性是无效的HTML，不幸的是，大多数惰性图像加载程序都是这样工作的。

我正在使用一个使用有效html标记的lazyloader，github链接：https://github.com/tvler/lazy-progressive-enhancement

将懒散加载的图像包装在noscript元素中进行声明：

<代码>

最终输出的html是

<代码>

您可以在github上查看整个项目，它处理批加载、事件挂钩

var noscript = document.querySelector('noscript'), img;
(img = document.createElement('div')).innerHTML = noscript.textContent;
noscript.parentElement.replaceChild(img.firstChild, noscript);

Answer 2

既然没有人能给出答案，我就把我找到的合理解决方案贴出来。

这个问题可以归结为以下几点：当我们想阻止浏览器在打开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，而是具有datasrc属性。例如，lazyloading脚本可以使用它逐个加载图像。

只有当javascript不可用时，nocript块内的图像才会可见，所以没有必要加载. lailing图像（也没有办法做到这一点，因为javascript不可用）。

但我们确实需要隐藏图像：

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

像nocript块内的img标签一样，这个style块只有在javascript不可用时才对浏览器可见。

另一方面：我认为我可以通过根本不在惰性图像上添加src或data-src属性来减少html大小。这会很好，因为它消除了页面中的冗余url，为我们节省了一些带宽。

我想我可以使用javascript从noscript块中提取src属性。但是，这是不可能的：javascript无法访问noscript块的内容。因此，上述方案是我能想到的最有效的方案。