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" 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.onload = function () {
      el.className = 'origin'; // 替换类名，实现动画效果
    }
  }
  // 当浏览器滚动的时候，继续判断
  bindEvent() {
    window.addEventListener('scroll', () => {
      this.canILoad();
    });
  }
  // 初始化
  init() {
    this.canILoad();
    this.bindEvent();
  }
}
// 实例化对象，参数则是需要使用懒加载的图片类名,
const lazy = new LazyLoad('.lazy')

如果您喜欢这篇文章，那么记得动动你们的👋，给个like或者关注我哦👍。