Javascript Lazyload延迟加载特效
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 >
分类: JS , 实例
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于Javascript Lazyload延迟加载特效的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did48685