Javascript渐进式jpeg

前言

之前写过一篇文章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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="preview1.jpg" />
  </div>
  <div class="progressive-item">
    <img class="preview lazy" data-original="origin2.jpg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="preview2.jpg" />
  </div>
  <div class="progressive-item">
    <img class="preview lazy" data-original="origin3.jpg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="preview3.jpg" />
  </div>
  <div class="progressive-item">
    <img class="preview lazy" data-original="origin4.jpg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="preview4.jpg" />
  </div>
  <div class="progressive-item">
    <img class="preview lazy" data-original="origin5.jpg" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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