预加载

1.什么是预加载

将所有的图片内容请求下来，送到页面中

2.预加载作用

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。

3.预加载的封装

function loading(obj) {

  var data = obj.data;
  var progressFun = obj.progress;
  var doneFun = obj.done;

  // 记录图片总个数
  var allCount = 0;
  for (var key in data) {
      allCount++;
  }

  // 创建数组，用于存放所有加载好的图片对象
  var imgsObj = {};

  // 遍历对象
  for (var key in data) {
      var value = data[key];

      // 创建Image对象
      var img = new Image();
      img.src = value;

      // 不能直接使用.的方式添加属性，因为那样无法替换key的值
      imgsObj[key] = img;

      // 记录完成加载的图片的个数
      var doneCount = 0;
      img.onload = function () {
          doneCount++;
          // 计算当前的进度
          var v = doneCount / allCount * 100;
          if (progressFun) {
              progressFun(v);
          }
          // 如果全部加载完成，则需要进行回调
          if (doneCount == allCount) {
              if (doneFun) {
                  doneFun(imgsObj);
              }
          }
      }
  }

}