Javascript Lazyload延迟加载特效，大家帮看看有问题没
源代码在底部，效果如下：
延时加载
有点简单了吧，核心代码就这点：
function imgLazyLoad(){ var timer,screenHeight = document.documentElement.clientHeight; var elems = Lazy.$('.lazyload'); elems = Lazy.toArray(elems); Lazy.bind(window,'scroll',loading); function loading(){ timer && clearTimeout(timer); timer = setTimeout(function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = 0;i<elems.length;i++){ // 图像距离屏幕顶部的距离 var pos = Lazy.getPos(elems[i]).top - scrollTop; // 如果距离顶部的距离小于屏幕的高度而且大于0则赋值SRC if(pos >0 && pos < screenHeight){ elems[i].src = elems[i].getAttribute('data-img'); elems.splice(i,1); } } if(elems.length == 0){ Lazy.unbind(window,'scroll',loading); } },300); } }
总的源代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>延时加载</title> <meta name="keywords" content="延时加载"/> <meta name="description" content="延时加载"/> </head> <style type="text/css"> .picBox { text-align: center;} .picBox ul{ list-style: none;} .picBox ul li { width: 640px; height: 480px; border: 3px solid #ccc; margin-top: 10px; background: url(http://images.cnblogs.com/cnblogs_com/NNUF/379856/o_loading.gif) no-repeat 50% 50%; } </style> <body> <div class="picBox"> <ul> <li><img data-img="http://farm4.staticflickr.com/3099/2472111608_17b12f5a17_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm4.staticflickr.com/3648/3438347792_2d33b1d09c_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7001/6794999999_ec3ff66a5c_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7084/7034721601_09f04266ac_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7215/7195069176_20ea93a8e4_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7226/7270774038_19b4e87179_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm3.staticflickr.com/2430/3977773445_39c57db815_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7097/7036796167_9b216e51c7_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7020/6540080851_fcb7f1e3dd_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> <li><img data-img="http://farm8.staticflickr.com/7102/7370904306_9a8dc71eb7_z.jpg" src="http://images.cnblogs.com/cnblogs_com/NNUF/379856/t_space.gif" alt="" class='lazyload'></li> </ul> </div> <script type="text/javascript"> var Lazy = { $:function(arg,context){ var tagAll,n,eles=[],i,sub = arg.substring(1); context = context||document; if(typeof arg =='string'){ switch(arg.charAt(0)){ case '#': return document.getElementById(sub); break; case '.': if(context.getElementsByClassName) return context.getElementsByClassName(sub); tagAll = Lazy.$('*',context); n = tagAll.length; for(i = 0;i<n;i++){ if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]); } return eles; break; default: return context.getElementsByTagName(arg); break; } } }, getPos:function (node) { var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft, scrollt = document.documentElement.scrollTop || document.body.scrollTop; var pos = node.getBoundingClientRect(); return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx } }, bind:function(node,type,handler){ node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler); }, unbind:function(node,type,handler){ node.removeEventListener?node.removeEventListener(type, handler, false):node.detachEvent('on'+ type, handler); }, toArray:function(eles){ var arr = []; for(var i=0,n=eles.length;i<n;i++){ arr.push(eles[i]); } return arr; } }; function imgLazyLoad(){ var timer,screenHeight = document.documentElement.clientHeight; var elems = Lazy.$('.lazyload'); elems = Lazy.toArray(elems); Lazy.bind(window,'scroll',loading); function loading(){ timer && clearTimeout(timer); timer = setTimeout(function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i = 0;i<elems.length;i++){ // 图像距离屏幕顶部的距离 var pos = Lazy.getPos(elems[i]).top - scrollTop; // 如果距离顶部的距离小于屏幕的高度而且大于0则赋值SRC if(pos >0 && pos < screenHeight){ elems[i].src = elems[i].getAttribute('data-img'); elems.splice(i,1); } } if(elems.length == 0){ Lazy.unbind(window,'scroll',loading); } },300); } } imgLazyLoad(); </script> </body> </html>