js图片预加载处理方案

参考链接

核心函数

/**
 * 图片预加载
 * @return {function}
 * imgList 需要预加载的图片地址
 * callback 图片加载完成后的回掉，可获取到加载进度值
 * timeout  图片加载等待时间
 */
(function() {
  var loader = function(imgList, callback, timeout) {
    timeout = timeout || 5000;
    var total = imgList.length,
      loaded = 0,
      imgages = [],
      _on = function() {
        if (loaded < total) {
          ++loaded
          if (callback) {
            callback(loaded / total)
          }
        }
      };

    if (!total) {
      return callback && callback(1);
    }

    for (var i = 0; i < total; i++) {
      imgages[i] = new Image();
      imgages[i].onload = imgages[i].onerror = _on;
      imgages[i].src = imgList[i];
    }

    // 指定时间内图片没有加载完，不在等待
    var timer = setTimeout(function() {
      if (loaded < total) {
        loaded = total
        if (callback) {
          callback(loaded / total)
        }
      }
      clearTimeout(timer)
    }, timeout * total);
  };

  window.imgLoader = loader
})();

使用方法

let arr = ['http://test.com/a.jpg', 'http://test.com/b.jpg','http://test.com/c.jpg']
imgLoader(arr, function(pre) {
  console.log(pre)
})

使用场景

最近业务上有一个需求，优化图片加载速度，最简单粗暴的方法就是预加载啦，下面以图片说明：

由于业务主要服务海外用户，所以服务器不在国内，每次点击左边的小图片，都要等几秒右边大图才能加载完成，严重影响用户体验，这项目使用vue开发的，于是在mounted钩子里调用预加载方法，这样不影响用户正常进入详情页，进入详情页后，浏览器开始偷偷的请求图片，一般4s左右就能把所有大图加载完成，图片切换起来就会快很多，亚马逊也使用的类似解决方法