首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

浏览器可视范畴图片加载

2013-11-08 
浏览器可视范围图片加载function lazyLoadImg(){imgs document.getElementsByTagName(img)addOnscrol

浏览器可视范围图片加载
function lazyLoadImg(){imgs = document.getElementsByTagName("img");addOnscroll();} //滚动条事件function addOnscroll(){runload();window.onscroll = function (){runload();}} //可视范围加载 function runload(){ for(var i=0; i<imgs.length; i++){ var isload = imgs[i].getAttribute("isload"); var point = getXY(imgs[i]) var clientY = document.documentElement.clientHeight; var clientX = document.documentElement.clientWidth; var imgclientY = point.y-(document.documentElement.scrollTop); var imgclientX = point.x-(document.documentElement.scrollLeft); if(isload != "true" && imgclientY < clientY && imgclientX < clientX){ imgs[i].src = imgs[i].getAttribute("_src"); imgs[i].setAttribute("isload", "true"); } } }//获取目标决定坐标function getXY(aBox){var tp=aBox.offsetTop;var lft=aBox.offsetLeft;do {aBox = aBox.offsetParent;lft += aBox.offsetLeft;tp += aBox.offsetTop;} while( aBox.tagName != "BODY" );return {"x":lft, "y":tp};} //初始化window.onload = function (){lazyLoadImg();}

?? 页面只需在img标签中添加_src(值为图片路径,原有的src设置成默认加载图片),最后导入js即可

热点排行