6

我正在为每个网页有很多图片的画廊所有者建立一个网站。因此，我想延迟加载网页上的图像，从而减轻初始负载。但是，我想以“渐进增强”的方式实现这一点。

我发现了很多延迟加载方法，但它们都需要摆弄 html 代码，这样网页在关闭 javascript 时将毫无用处。（例如，标签的src属性img保持未设置，直到图像被延迟加载）。

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

  1. 防止浏览器获取图像，即使页面上有图像，但仅在打开 javascript 时才这样做（因此在非 javascript 浏览器上，图像仍然正常加载）。这应该在不更改 html 的情况下完成。
  2. src将属性保存在data-src属性中
  3. 向下滚动时依次加载图像

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

有没有人有任何想法？

4

2 回答 2

9

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

这个问题归结为以下几点：虽然我们希望阻止浏览器在打开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，此style块仅在 javascript 不可用时对浏览器可见。

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

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

于 2014-06-08T16:02:43.137 回答
1

不指定src属性是无效的 HTML，不幸的是大多数惰性图像加载器的工作方式。

我正在开发一个使用有效 html 标记的惰性加载器，github 链接： https ://github.com/tvler/lazy-progressive-enhancement

延迟加载的图像将通过将其包装在 noscript 元素中来声明：

<noscript><img alt="hello!" src="..."></noscript>

最终输出的 html 将是

<img alt="hello!" src="...">.

您可以在 github 上查看整个项目，它处理批量加载、事件挂钩等，但这里是单个 noscript 图像范围内的基本功能：

var noscript = document.querySelector('noscript'), img;
(img = document.createElement('div')).innerHTML = noscript.textContent;
noscript.parentElement.replaceChild(img.firstChild, noscript);
于 2016-04-10T20:36:31.013 回答