图片懒加载怎么从简单到复杂

本篇内容主要讲解“图片懒加载怎么从简单到复杂”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“图片懒加载怎么从简单到复杂”吧!

成都创新互联成立于2013年，先为青秀等服务建站，青秀等地企业，进行企业商务咨询服务。为青秀企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

为什么要做图片的懒加载

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

图片懒加载的原理

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

如果我们不去进行图片的懒加载，默认情况下，资源的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 的技术来制作一个占位用的元素。