前言

之前写过一篇文章30行Javascript代码实现图片懒加载，基于这个类，我们可以做其他事情：

• 加载中的动画(不讲)

• 渐进式jpeg

渐进式jpeg的效果图（效果图有点大，请耐心等待，环境为3G网络）：

c.gif

思路

• img标签的src属性直接进赋行值，赋值为一张分辨率极低的缩略图路径（2k-3k）

• 当浏览器滚动到img标签的时候，进行加载实际的图片

• 当实际图片加载完成之后，讲src的路径替换到实际的图片路径

代码

html

<!-- 渐进式图片加载列表 -->

  

    
  
  

    
  
  

    
  
  

    
  
  

    
  

css

body {  padding: 50px;  text-align: center;
}.progressive-item {  position: relative;  display: block;  width: 100%;  overflow: hidden;  margin: 0 auto 200px;
}.progressive-item img {  display: block;  width: 100%;  max-width: 100%;  height: auto;  border: 0 none;
}.progressive-item img.preview {  filter: blur(2vw);  transform: scale(1.05);
}.progressive-item img.origin {  opacity: 0;  animation: origin 1s ease-out;
}

@keyframes origin {
  0% {    transform: scale(1.2);    opacity: .8;
  }
  100% {    transform: scale(1);    opacity: 1;
  }
}

javascript（拷贝之前封装好的类，稍微改动一下）

// 图片懒加载类class LazyLoad {  constructor(el) {    this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    this.init(); // 初始化
  }  // 判断是否该图片是否可以加载
  canILoad() {    let imglist = this.imglist;    for (let i = imglist.length; i--;) {      this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
    }
  }  // 获取图片与窗口的信息
  getBound(el) {    let bound = el.getBoundingClientRect();    let clientHeight = window.innerHeight;    // 图片距离顶部的距离  {      this.canILoad();
    });
  }  // 初始化
  init() {    this.canILoad();    this.bindEvent();
  }
}// 实例化对象，参数则是需要使用懒加载的图片类名,const lazy = new LazyLoad('.lazy')

作者：daydreammoon
链接：https://www.jianshu.com/p/6fca9f15cdc1