【优化】图片加载

常规建议:

多从加载资源的格式及大小入手。 例如图标使用icon-font、svg、雪碧图， 以及base64等新格式图片。

google在2010年推出的webp。

图片瀑布，则是建议使用懒加载的方式，即拖动滚动的条事件再一次进行加载。

一些新建议:

1. Medium ,先加载缩略图完后再加载高清原图。

    window.onload = function() {
      
      var placeholder = document.querySelector('.placeholder'),
          small = placeholder.querySelector('.img-small')
      
      // 1: load small image and show it
      var img = new Image();
      img.src = small.src;
      img.onload = function () {
       small.classList.add('loaded');
      };
      
      // 2: load large image
      var imgLarge = new Image();
      imgLarge.src = placeholder.dataset.large; 
      imgLarge.onload = function () {
        imgLarge.classList.add('loaded');
      };
      placeholder.appendChild(imgLarge);
    }

1. google, 预加载 ，加载背景为图片主要颜色， 随后显示加载完成的图片

参考

blog原文