浏览器可视范围图片加载
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即可