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

资源文件：

脚本代码：

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)
    }
  }
})();

效果图：

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/7249