图片懒加载是一个很受欢迎的优化站点的方法,因为它很容易实现,并且能明显提升性能。使用惰性加载,我们可以异步加载图片,这意味着可以只加载浏览器视口内的图片。 大约一年前,图像和iframe
的原生惰性加载特性已发布,但是仅针对谷歌和其他主流浏览器。该功能的重点是使浏览器可以控制何时请求图像或iframe
资源,这使得开发工作更加容易。在此前,唯一的选择是使用JavaScript
插件来监视视口更改并动态加载资源。现在,浏览器也可以原生支持(懒加载)。
在写此文时候(原文在dev.to上是2020年8月31日发布),大约73% of currently used browsers支持这个特性,这还不赖。但是,我们不想让27%
的潜在用户无法访问和使用网站的图片资源。
所以,这就很有趣了,值得思考:
JS
插件
JS
插件
img
和source
元素
loading
属性有三个值。
auto
- 默认值。和不设置loading
属性效果一样。
eager
- 立即加载资源。
lazy
- 一旦资源在视口就加载它
尽管上面的取值有特定的使用案例,但是,我们通常希望对折叠以上(视口)的资源使用eager
,对折叠以下的资源使用lazy
。
我们需要编写一个脚本,该脚本将在HTML
文档后运行。我们使用了Jekyll
,并将脚本作为HTML
的部分添加在body
的末尾。这是运行JavaScript
函数以避免渲染阻塞的最有效方法。
我们希望JavaScript
函数基于浏览器原生支持的特性来开启图像加载过程。为此,我们将图像的路径添加到data-src
而不是src
。但是我们不应该将src
留空,因此我们将使用1 x 1px
透明图像占位符。我们对img
元素标记如下所示:
<img
src="/path/to/placeholder/image.png"
data-src="/path/to/full/image.jpg"
alt="Image description"
class="lazyload"
loading="lazy"
/>
复制代码
⚠️
class="lazyload"
是给懒加载后备插件使用的。我使用了此特定类名的插件lazysizes
另外,我们想支持picture
元素,它包含多个source
元素并且img
元素作为后备元素。
<picture>
<source data-srcset="path/to/image.webp" type="image/webp" />
<source data-srcset="path/to/image.jpg" />
<img loading="lazy"
class="lazyload"
src="path/to/placeholder/image.png"
data-src="path/to/image.jpg"
alt="Image description"
/>
picture>
复制代码
我们需要检测用户的浏览器是否支持原生的懒加载。幸运的是,我们可以直接使用JavaScript
去做这件事。
if ("loading" in HTMLImageElement.prototype) {
/* Native lazy loading is supported */
} else {
/* Native lazy loading is not supported */
}
对于原生懒加载,我们只需要对img
分配data-src
值给src
值,对source
分配data-srcset
值给srcset
值,剩下的事情就交给浏览器了。
对于不支持该特性的浏览器,我们只需要加载相关的JavaScript
插件,可选的,如果没有自动化集成的,那么就运行该插件。我习惯使用lazysizes,但是任何懒加载插件都会生效,前提是保证元素的标记要正确(比如类名,data元素等)。
于是,最终的JavaScript
的代码会看起来长这样:
<span class="hljs-keyword">if</span> (<span class="hljs-string">"loading"</span> <span class="hljs-keyword">in</span> HTMLImageElement.prototype) {
<span class="hljs-keyword">var</span> images = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">'img[loading="lazy"]'</span>);
<span class="hljs-keyword">var</span> sources = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">"source[data-srcset]"</span>);
sources.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">source</span>) </span>{
source.srcset = source.dataset.srcset;
});
images.forEach(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">img</span>) </span>{
img.src = img.dataset.src;
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">var</span> script = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">"script"</span>);
script.src = <span class="hljs-string">"/link/to/lazyload.js"</span>;
<span class="hljs-built_in">document</span>.body.appendChild(script);
}
本文截取Best way to lazy load images for maximum performance部分翻译,进行学习和总结。懒加载在商城站点和运营活动的场景使用更加频繁,当然,图片还要进行最优压缩、切割和CDN处理等。更多博文内容详见Jimmy Blog