专题1.0 图片资源的预加载

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。如何实现预加载？

资源文件：

脚本代码：

js/index.js

(function(){
  var arr = [];

  for (var i = 1; i <= 6; i++) {
    arr.push("./img/web-" + (i < 10 ? "0" + i : i) + ".jpg");
  }

  getImage(arr, callbackHandler);

  function getImage (arr, callback) {
    var img = new Image();
    img.arr = arr;
    img.callback = callback;
    img.imgList = [];
    img.num = 0;
    img.addEventListener("load", loadHandler);
    img.src = arr[img.num];
  }

  function loadHandler () {
    this.imgList.push(this.cloneNode(false));
    this.num++;
    if (this.num >= arr.length) {
      callbackHandler(this.imgList);
      this.removeEventListener("load", loadHandler);
      return;
    }
    this.src = this.arr[this.num];
  }

  function callbackHandler (arr) {
    for (var i = 0; i < arr.length; i++) {
      console.log(arr[i].src)
    }
  }
})();

采用面向对象思想封装的脚本代码（提高复用性）：

js/utils/utils.js

var Utils = (function(){
  return {
    loadImage: function (arr, callback) {
      var img = new Image();
      img.arr = arr;
      img.callback = callback;
      img.imgList = [];
      img.num = 0;
      img.addEventListener("load", this.loadHandler);
      img.src = arr[img.num];
    },
    loadHandler: function () {
      this.imgList.push(this.cloneNode(false));
      this.num++;
      if (this.num >= this.arr.length) {
        this.callback(this.imgList);
        this.removeEventListener("load", this.loadHandler);
        return;
      }
      this.src = this.arr[this.num];
    }
  }
})();

js/index2.js

(function(){
  var arr = [];

  for (var i = 1; i <= 6; i++) {
    arr.push("./img/web-" + (i < 10 ? "0" + i : i) + ".jpg");
  }

  Utils.loadImage(arr, callbackHandler);

  function callbackHandler (arr) {
    for (var i = 0; i < arr.length; i++) {
      console.log(arr[i].src)
    }
  }
})();

效果图：

参考文章：

• 3 Ways to Preload Images with CSS, JavaScript, or Ajax https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

• Web 性能优化：Preload,Prefetch的使用及在 Chrome 中的优先级 https://segmentfault.com/a/1190000018828048

• https://segmentfault.com/a/1190000005904337
• https://segmentfault.com/a/1190000019595990
• https://www.cnblogs.com/keliguicang/p/10946180.html
• https://help.aliyun.com/knowledge_detail/36519.html?spm=5176.13394938.0.0.1aa72df5wcDOoo
• https://www.cnblogs.com/dirkhe/p/6874184.html

来源：oschina

链接：https://my.oschina.net/u/3105000/blog/3156335