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 海涛 * */
时间: 2024-10-11 12:27:37