var num = document.getElementsByTagName('img').length;var img = document.getElementsByTagName("img");var n =0;//存储图片加载到的位置,避免每次都从第一张图片开始遍历lazyload();//页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;functionlazyload(){//监听页面滚动事件var seeHeight = document.documentElement.clientHeight;//可见区域高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条距离顶部高度for(var i = n; i < num; i++){if(img[i].offsetTop < seeHeight + scrollTop){if(img[i].getAttribute("src")=="default.jpg"){
img[i].src = img[i].getAttribute("data-src");}
n = i +1;}}}
jQuery实现
var n =0,
imgNum =$("img").length,
img =$('img');lazyload();$(window).scroll(lazyload);functionlazyload(event){for(var i = n; i < imgNum; i++){if(img.eq(i).offset().top <parseInt($(window).height())+parseInt($(window).scrollTop())){if(img.eq(i).attr("src")=="default.jpg"){var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i +1;}}}}
使用节流函数进行性能优化
如果直接将函数绑定在scroll事件上,当页面滚动时,函数会被高频触发,这非常影响浏览器的性能;
可引用节流函数来限制触发频率,优化性能;
节流函数:只允许一个函数在N秒内执行一次,下面是一个简单的节流函数:
// 简单的节流函数// fun 要执行的函数// delay 延迟// time 在time时间内必须执行一次functionthrottle(fun, delay, time){var timeout,
startTime =newDate();returnfunction(){var context =this,
args = arguments,
curTime =newDate();clearTimeout(timeout);if(curTime - startTime >= time){// 如果达到了规定的触发时间间隔,触发 handlerfun.apply(context, args);
startTime = curTime;}else{// 没达到触发间隔,重新设定定时器
timeout =setTimeout(fun, delay);}};};functionlazyload(event){// 实际绑定在 scroll 事件上的 handlerfor(var i = n; i < imgNum; i++){if(img.eq(i).offset().top <parseInt($(window).height())+parseInt($(window).scrollTop())){if(img.eq(i).attr("src")=="default.jpg"){var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i +1;}}}}// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));