关于图片加载以及加载体验的一些想法

在项目中，有存在大量图片列表展示的场景的。而浏览器的并发请求都是有限制的。

加载体验
正常加载的流程
1.从后端得到 url
2.将压缩图 url 填入图列表中，原图的 url 填入预览大图的list中
优化后的流程
1.渲染一个容器，保持与原图的比例和尺寸相同，填充一个较浅的背景色；
2.先加载小图（通常都是压缩到尺寸很小的，例如一个正方形的图片 20 X 20 ，画质有多渣就多渣，有多模糊就多模糊），同时使用模糊（或者CSS3 的高斯）效果；
3.监听小图的load事件，等待小图加载完成，在load事件执行时，new image 对象，监听new 出来的 image对象的load 事件；
4.内存中的 load 事件执行的时候，将小图的url 替换成大图的url；
为什么这样做；
因为是在浏览器中，已经加载过的图片url，不会重复加载，在内存中加载了一次，再替换到页面中，结合模糊的效果，可以给用户一个比较直观的加载过程。

预加载:
优点：在某些可预测的用户行为中使用，可以做到图片秒出的效果，几乎不用等待
缺点：在内存中预加载，资源占用多，就是用空间换时间的概念。

//例子
  'use strict';
(() => {
  // 页面加载，收集需要加载的图片的元素
  const objects = document.getElementsByClassName('asyncImage');
  Array.from(objects).forEach((item) => {
    // 遍历元素，new image对象，内存中赋值大图的src，监听大图的load事件
    const img = new Image();
    img.src = item.dataset.src;
    // 加载图像后，替换HTML元素的src
    img.onload = () => {
      item.classList.remove('asyncImage');
      return item.nodeName === 'IMG' ? 
        item.src = item.dataset.src :        
        item.style.backgroundImage = `url(${item.dataset.src})`;
    };
  });
})();

懒加载:
概念是：用牺牲加载的完整度来提升页面呈现的速度；

监听容器的滚动事件，滚动到设置好的位置或者阀值即加载图片元素；

 <img  class="asyncImage" data-src="xxx.png" alt="logo"/>

首次加载的时候，把图片链接存放在自定义属性中（data）data-src 的value中，等到滚动到指定数值时，从data-src提取出来，赋值在src 上；

 'use strict';
 const lazyLoad = (className) => {
  const objects = document.getElementsByClassName(className);
  Array.from(objects).forEach((item) => {
    // 遍历元素，赋值
    item.nodeName === 'IMG' ? 
        item.src = item.dataset.src :        
        item.style.backgroundImage = `url(${item.dataset.src})`;
}
lazyLoad('asyncImage');

最后编辑于：2019.01.28 12:46:42