经常看到京东,团购有图片延迟加载的使用,于是自己捉摸着实现了一个,仅供参考。
js代码部分:
/** *图片延迟加载 *@param yourfun 处理图片的方法 *@param divID scroll绑定的容器的ID(默认是当期事件触发的控件,然后是document) * **/ function lazyload(yourfun,divID,offsetParentId){ //构造全局变量:lazyImgs,格式为{arr:null,len:null}; if(typeof(lazyImgs)=="undefined"){ lazyImgs = {arr:null,len:null}; lazyImgs.arr = document.getElementsByTagName("IMG"); //获取页面所有图片 lazyImgs.len = lazyImgs.arr.length; } //顺序:指定ID的控件,然后是 当前事件触发的控件(先IE后Firefox),最后是 document var dom =document.getElementById(divID+"")||(window.event||{}).srcElement||getFFEvent().target||document.documentElement; var nOffsetHeight = dom.offsetHeight+dom.scrollTop; var img; var offsetParent = null; var IEversion = 0; if(document.all){ IEversion = parseInt((navigator.userAgent.split("MSIE")[1]).split(";")[0].replace(/ /,'')); } var nTop = 0; for(var i=0;i<lazyImgs.len;i++){ img = lazyImgs.arr[i]; nTop = img.offsetTop; if(IEversion==7||IEversion==6){//IE67特殊处理。 nTop = getIE7ImgOffset(img).offsetTop; //nTop = img.offsetParent.offsetParent.offsetParent.offsetTop; } //TODO +100是为了看到延迟效果,改成+0则会立即显示 if(nTop+100 < nOffsetHeight){ yourfun(img); } } } /* 获取FF下当前事件对象 */ function getFFEvent(){ var func = EasyTip.getFFEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { // top.JSLogger.log(arg0); return arg0; } } func = func.caller; } return func; } /* *目的:IE7和IE6下,如果图片的容器(多半是DIV)的float等于left或者right,那么 * 自身的offsetTop等于相对于其父容器的高度,不是相对于body的高度,IE7、6如下处理。 *用户获取包裹img标签在IE7和IE6下的offset对象 *@param dom 一个dom对象(传递img对象或者其他dom对象) *@return 从里向外找,返回第一个float为空的dom的父窗体。 ***/ function getIE7ImgOffset(dom){ var sFloat = dom.offsetParent.style["float"]||""; var bNext = ("left"==sFloat.toLowerCase() || "right"==sFloat.toLowerCase()); while(bNext && (dom = dom.offsetParent)){ sFloat = dom.style["float"]||""; bNext = ("left"==sFloat.toLowerCase() || "right"==sFloat.toLowerCase()); } return dom; } //延迟图片的处理方法:重新加载并显示图片的src function resetImg(img){ if(!!img.getAttribute("file")){ img.setAttribute("src",img.getAttribute("file")); img.removeAttribute("file"); } } function onload(){ //使用图片LazyLoud document.getElementById("content").style.height="500px"; document.getElementById("content").onscroll= function(){ lazyload(resetImg,"content","1366content"); }; }
附件是演示源码
愤怒的coder - 不断进取