加载页面时图片一直是流量的大头,过多的图片会严重影响页面的加载速度,针对图片的性能优化方法有诸如base64、雪碧图等等,延迟加载也是其中一种普遍使用的方法。延迟加载即图片的懒加载或惰性加载,当页面初次加载时只加载显示可视区域的图片,页面滚动时,图片进入了可视区域才会进行资源的加载。

 懒加载的原理很简单,首先将img真实的资源地址写到data-src或者data-original属性里,src的属性设置为占位图片,等到窗口滚动到可视区域时,把data-src或者data-original的属性也就是真实的图片地址赋给src属性,从而实现图片的懒加载。

使用JS实现懒加载

下载 lazyload.js,在文档底部引入lazyload.min.js。

	<script src="jQuery.js"></script>
<!-- 或 <script src="zepto.js"> -->
<script src="lazyload.min.js"></script>

将img的真实图片地址写入到data-original属性中,对需要进行懒加载的img标签添加class名称lazy,建议将img标签的src属性设置为展位图片或加载动画,确保img有一定的高度和宽度。

	<!-- 直接赋予图片宽高 -->
    <img class="lazy" data-original="img/example.jpg" width="640" height="480">
    
    <!-- 或:通过css赋予图片宽高 -->
    <style>
        .lazy{width:640px;height:480px;}
    </style>
    <img class="lazy" data-original="img/example.jpg">
    
    <!-- 或:自适应宽度的图片样式(常用于移动端) -->
    <style>
        .lazy{width:100%;height:0;padding-top:75%;background-size:100%;}
        /* 假设高宽比为 480:640,即75%,并使用背景图的方式将图片铺在padding-top区域内
        (padding的百分比是宽度的百分比而不是高度的,即使是padding-top|padding-bottom) */
    </style>
    <div class="lazy" data-original="img/example.jpg"><div>

然后在文档底部加入以下代码:

	$(".lazy").lazyload();

浏览器原生支持

最新版本的Google Chrome 75版本的浏览器可以支持原生的懒加载,比如img标签和iframe标签。

Google Chrome 75支持原生懒加载

要使用浏览器原生的懒加载,需要给img标签或者iframe标签加上loading="lazy"属性,该属性一共有三个值,分别是:

  • lazy:对资源进行延迟加载。。
  • eager:立即加载资源。
  • auto:浏览器自行判断决定是否延迟加载资源。

loading属性是Google Chrome75版本的实验性功能,在其他浏览器下可能不适用。

判断浏览器是否支持原生懒加载:

	if ('loading' in HTMLImageElement.prototype) { 
    // 浏览器原生支持 `loading` 属性..
} else {
    // 通过js实现
}

需要使用例如data-original这样的属性名标记资源地址(而不是src、srcset或<source>),以避免在不支持该属性的浏览器中立即加载资源:

	<img loading="lazy" data-original="pic.png" class="lazy" alt="." />

若浏览器支持loading属性,则把data-original替换为src;若不支持则使用回原来延迟加载的方法:

	if ('loading' in HTMLImageElement.prototype) {
            const images = document.querySelectorAll("img.lazyload");
            images.forEach(img => {
                img.src = img.dataset.src;
            });
        } else {
            // Dynamically import the LazySizes library
            let script = document.createElement("script");
            script.async = true;
            script.src =
                "//cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
            document.body.appendChild(script);
        }
    

图片类型支持

图片类型 是否支持
JPEG 支持
GIF 不支持
PNG 支持
APNG 不支持
SVG 不支持