html5 app图片预加载

时间:2021-07-09 19:52:26
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 海涛
* */