图片懒加载

图片懒加载概念

  图片懒加载就是图片的延时加载或者按需加载,当用户将要浏览到某张图片时,才开始加载该图片,而不是一开始就加载图片。图片懒加载主要应用于图片较为丰富的页面,如相册页,新闻列表页等等。图片懒加载具有以下优点:

  1. 节省用户流量,对于移动端设备效果尤为显著。
  2. 降低单位时间内页面请求链接数目,减轻服务器压力。

图片懒加载实现步骤

  图片懒加载实现步骤主要分为三步:

  1. 存储图片真实链接到img标签的自定义属性,通常设置为’data-src’, 设置img标签的src属性为空或者设置为默认图片的链接。
  2. 在页面(或者某一元素)滚动过程中动态判断其包含的图片是否进入浏览器视口(viewport)。
  3. 如果图片进入了viewport显示区域,则将img标签的src属性值设置为图片的真实链接,加载图片,否则不作处理。

判断图片是否处于浏览器视口中的方法

图 1 判断图片是否进入浏览器视口

  图片懒加载技术的关键在于如何判断图片是否进入浏览器的视口区域,图1详细介绍了判断方法。

图片懒加载组件

  根据图片懒加载的原理,笔者实现了一个图片懒加载组件lazyloader,并将其集成在了自己的js武器库jslever(JS原生代码实现)中,现已将完整代码上传至笔者的github仓库。关于lazyloader组件的使用方法,读者可以参考jslever的README文件提供的示例。