前言
之前写过一篇文章30行Javascript代码实现图片懒加载，基于这个类，我们可以做其他事情：
加载中的动画(不讲)
渐进式jpeg
渐进式jpeg的效果图（效果图有点大，请耐心等待，环境为3G网络）：
c.gif
思路
img标签的src属性直接进赋行值，赋值为一张分辨率极低的缩略图路径（2k-3k）
当浏览器滚动到img标签的时候，进行加载实际的图片
当实际图片加载完成之后，讲src的路径替换到实际的图片路径
代码
html
<!-- 渐进式图片加载列表 --><div class="progressive-list"> <div class="progressive-item"> <img class="preview lazy" data-original="origin1.jpg" src="preview1.jpg" /> </div> <div class="progressive-item"> <img class="preview lazy" data-original="origin2.jpg" src="preview2.jpg" /> </div> <div class="progressive-item"> <img class="preview lazy" data-original="origin3.jpg" src="preview3.jpg" /> </div> <div class="progressive-item"> <img class="preview lazy" data-original="origin4.jpg" src="preview4.jpg" /> </div> <div class="progressive-item"> <img class="preview lazy" data-original="origin5.jpg" src="preview5.jpg" /> </div></div>
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; // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
return bound.top <= clientHeight - 100; // -100是为了看到效果，您也可以去掉
} // 加载图片
loadImage(el, index) { // 获取之前设置好的data-original值
let src = el.getAttribute('data-original'); // 赋值到src，从而请求资源
el.src = src; // 避免重复判断，已经确定加载的图片应当从imglist移除
this.imglist.splice(index, 1); // 判断图片是否加载完成
this.checkImage(el);
} // 判断图片是否加载完成
checkImage(el) {
el. = function () {
el.className = 'origin'; // 替换类名，实现动画效果
}
} // 当浏览器滚动的时候，继续判断
bindEvent() { window.addEventListener('scroll', () => { this.canILoad();
});
} // 初始化
init() { this.canILoad(); this.bindEvent();
}
}// 实例化对象，参数则是需要使用懒加载的图片类名,const lazy = new LazyLoad('.lazy')
作者：daydreammoon
链接：https://www.jianshu.com/p/6fca9f15cdc1
随时随地看视频
