微信H5页面大家怎么预加载图片

Question

移动端预加载我一般的处理思路如下：
首先图片的地址写成这样

<img _src="img/img.jpg"/>

当图片加载完成之后把图片src设置成_src
大家有没有更好的预加载思路呢？

Answer 1

 var image = new Image();
    image.addEventListener("load", imageLoaded, false);
    image.src = url;

当image的src被设置后，就会自动去加载，当加载完成后可以给一个加调来统计是否加载完成所有的图片。

Answer 2

var images = document.images;
var total = images.length;
var loaded = 0;
for (var i = 0; i < total; i++) {
    var image = new Image();
    image.onload = function() {
        if (++loaded >= total) {
            // 图片已全部预加载完成
        }
    };
    image.src = images[i].src;
}

Answer 3

jQuery页面滚动图片等元素动态加载实现

Answer 4

(function($) {
  var cache = [];
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

jQuery.preLoadImages(imgUrl); 

Answer 5

页面先显示加载的loading图片，然后你获取你要加载的图片是否都加载完毕，再用onload将loading图片隐藏掉就可以