Javascript Lazyload延迟加载特效

Javascript Lazyload延迟加载特效,大家帮看看有问题没

源代码在底部,效果如下:

 

延时加载

 

  • Javascript Lazyload延迟加载特效
  • 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实例

你可能感兴趣的:(JavaScript)