图片懒加载

1. 作用：为了让页面打开的速度更快。
2. 原理： 首屏中，用一张小的默认图占位，当内容加载完成后，再加载真实的图片。 对于其他屏中，当滚动条滚动到对应地方时，开始加载真实的图片。

比如有一个如下的代码：

.images img {
  display:none;
}

<div class = "images">
  <img src = "" trueImg ="img.jpg"/>
</div>

首屏延时加载：

  var images = document.getElementsByClassName("images")[0];
 var imgSrc =  images.getElementsByTagName("img")[0];

  window.setTimeout(function(){
  /*    imgSrc.src = imgSrc.getAttribute("trueImg");
      imgSrc.style.display = "block";  // 图片地址必须是有效的
*/
    var oImg = new Image();  // var oImg = document.createElement("img");
    oImg.src = imgSrc.getAttribute("trueImg");
    oImg.onload = function(){  // 图片能够正常加载执行该方法
      imgSrc.src = this.src;
      imgSrc.style.display = "block"; 
      oImg = null;
    }    
},500);

其他屏延时加载：当其他屏的图片完全进入视野时才加载真实的图片。如果（图片的高度+距 body 的上偏移）的距离小于 （clientHeight + scrollTop），加载真实的图片。

window.onscroll = function(){
 if(images.isLoad){
  return;
  }
  var A = images.offsetHeight +images.offsetTop;
  var B = document.documentElement.clientHeight + document.body.scrollTop;   // 这里没有兼容性处理，是不对的。
  if(A < B){
    var oImg = new Image();
    oImg.src = imgSrc.getAttribute("trueImg");
    oImg.onload = function(){
        imgSrc.src = this.src;
        imgSrc.style.display = "block";
        oImg = null;
    }    
    images.isLoad = true;   // 避免重复加载
  }
}

promise 异步加载图片：

var images = document.getElementsByClassName("images")[0];
var imgSrc =  images.getElementsByTagName("img")[0];
var url = imgSrc.getAttribute("trueImg");
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    
    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;
  });
}