图片懒加载从简单到复杂

图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介绍，逐步增加复杂度，希望能讲清楚常见的图片懒加载场景及在该场景下对应的解决办法，也希望对你有所帮助。

成都创新互联网络公司拥有十余年的成都网站开发建设经验，1000多家客户的共同信赖。提供网站设计制作、做网站、网站开发、网站定制、买链接、建网站、网站搭建、自适应网站建设、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

为什么要做图片的懒加载

假设在用户访问某个页面时就加载这个页面全部的图片（即使这些图片并不处在用户的当前的视窗中），在弱网环境或者网速较慢的环境下，这些“冗余”图片的下载会占用用户本来就非常有限的带宽，伤害用户体验（比如影响其他资源的下载）。所以对于网站的图片，理想的做法是懒加载（按需加载）。

图片懒加载的原理

在浏览器内部对于各种资源有着一套自己的优先级定义，浏览器会优先加载优先级高的资源。

如果我们不去进行图片的懒加载，默认情况下，资源的priority如下。

这些优先级标记为high的图片会占用其他资源的下载带宽，可能会造成某些比较关键的资源（比如xhr call）加载缓慢，拖慢页面速度。

图片懒加载的简单实现

图片懒加载的思路一般时当页面加载时加载一个尺寸很小的占位图片（1kb以下），然后再通过js选择性的去加载真正的图片。

一个最简单的的实现如下： 

 
 
 
 

  
  
  
  
// index.css  
  
  
  
  
  img[src] {  
  
  
  
  
      filter: blur(0.2em);  
  
  
  
  
  }  
  
  
  
  
  img {  
  
  
  
  
      filter: blur(0em);  
  
  
  
  
      transition: filter 0.5s;  
  
  
  
  
  }  
 
 
 
 

 
 
 
 

  
  
  
  
(function lazyLoad(){  
  
  
  
  
    const imageToLazy = document.querySelectorAll('img[src]');  
  
  
  
  
    const loadImage = function (image) {  
  
  
  
  
        image.setAttribute('src', image.getAttribute('src'));  
  
  
  
  
        image.addEventListener('load', function() {  
  
  
  
  
            image.removeAttribute("src");  
  
  
  
  
        }) 
  
  
  
  
    }  
  
  
  
  
    imageToLazy.forEach(function(image){  
  
  
  
  
        loadImage(image);  
  
  
  
  
    })  
  
  
  
  
})() 
 
 
 
 

通过懒加载之后，资源优先级如下。

图片懒加载的进阶实现–滚动加载

上面的方案并不完美，对于用户来说，不在视窗中的图片可能根本不是用户当前关心的图片，所以我们可以让这些图片出现在用户视窗中再进行加载。

运用Intersection Observer 我们可以做到当图片滚动到视窗后再加载该图片。 

 
 
 
 

  
  
  
  
(function lazyLoad(){  
  
  
  
  
    const imageToLazy = document.querySelectorAll('img[src]');  
  
  
  
  
    const loadImage = function (image) {  
  
  
  
  
        image.setAttribute('src', image.getAttribute('src'));  
  
  
  
  
        image.addEventListener('load', function() {  
  
  
  
  
            image.removeAttribute("src");  
  
  
  
  
        })  
  
  
  
  
    }  
  
  
  
  
    const intersectionObserver = new IntersectionObserver(function(items, observer) {  
  
  
  
  
        items.forEach(function(item) {  
  
  
  
  
            if(item.isIntersecting) {  
  
  
  
  
                loadImage(item.target);  
  
  
  
  
                observer.unobserve(item.target);  
  
  
  
  
            }  
  
  
  
  
        });  
  
  
  
  
    });  
  
  
  
  
    imageToLazy.forEach(function(image){  
  
  
  
  
        intersectionObserver.observe(image);  
  
  
  
  
    })  
  
  
  
  
})() 
 
 
 
 

上面的这些demo都在https://github.com/hateonion/lazy-load 这个repo里面。

如何选择合适的Placeholder图片

在上面的demo中我们使用了placeholder图片，实际上，图片所占的位置是否确定对于我们选择placeholder图片有着很大的影响。

图片尺寸已知

图片尺寸已知出现的场景一般是博文的题图或者网站中一些固定尺寸的thumbnail，这些图的尺寸一般固定且一般不会发生改变。对于这种场景，我们可以加载对应尺寸的placeholder图片（如上一节的demo）。我们可以自己裁剪对应尺寸的的placeholder图片或者使用类似http://placeholder.com/ 这样的服务来获取placeholder图片。

图片尺寸未知

图片尺寸未知的情况下一般我们需要生成对应的thumbnail然后去加载我们生成的thumbnail去做placeholder。为了生成这些thumbnail你可以调用imagemagick或者调用一些在线的图片分割服务（比如七牛）

懒加载防止布局抖动

在图片懒加载时，由于图片的尺寸不定，浏览器难以计算需要给图片预留出的位置。所以当图片加载完成后会出现网页布局的抖动。

(image from From http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/)

即使我们选择的placeholder很小，可以在毫秒级别完成下载，用户可能意识不到布局的抖动。但是在一些性能比较差的设备上，这种布局的抖动还是会一定程度上影响用户的体验。为了完全避免布局闪动，我们可以采用aspect ratio boxes 的技术来制作一个占位用的元素。