html5 app图片预加载

function Laimgload(){}  //图片预加载JS
Laimgload.prototype.winHeight = function(){  //计算页面高度
    var winHeight = 0;
    //获取窗口高度 
    if (window.innerHeight){
        winHeight = window.innerHeight; 
    }else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight; 
    }
    return winHeight;
}
Laimgload.prototype.loadImg = function(arr){        //图片预加载执行
        for( var i = 0,len = arr.length; i < len; i++){
            if(arr[i].getBoundingClientRect().top-this.winHeight() < document.documentElement.clientHeight && !arr[i].isLoad){
                 arr[i].isLoad = true;
                 arr[i].style.cssText = "transition: ''; opacity: 0;";
                 if(arr[i].dataset){
                     this.aftLoadImg(arr[i],arr[i].dataset.original);    
                 }else{
                     this.aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
                 }
                 (function(i){
                     setTimeout(function(){
                       arr[i].style.cssText = "transition: 1s; opacity: 1;"
                     },16)
                  })(i);
                }
         }
}
Laimgload.prototype.aftLoadImg = function(obj,url){  //图片地址切换
    var oImg = new Image();
        oImg.src = url;
    if(oImg.complete){
        obj.src = oImg.src;
    }else{
        oImg.onload = function() {
           obj.src = oImg.src;
        };
    }
}

_laimgload = new Laimgload();

/* 图片预加载JS   
 * 把图片<img src="这里放加载中的小图" data-original="这里放图片的路径"/> 然后获取图片集合传入下面调用函数中  获取图片集合jQuery方法  $("#content_id").find("img"); 
 * 调用方法：  _laimgload.loadImg("这里传图片集合");
 * @author     海涛
 * */

 

转载于:https://www.cnblogs.com/haitaoblog/p/5413487.html