js图片懒加载插件封装

昨天晚上弄的有点儿晚未做优化，现在添加了多个区块同时添加lazyload方法

<style>
.wrapper{width:150px;}
</style>
<div class="wrapper" id="wrapper">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/064/076/068/10871010329/85d6a815d43af7becda60bd942be1058_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/231/091/046/14045893768/a8ac9d9cede8f457b1cf3ef17164bbb1_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/004/115/065/15695236389/a82b208e0c20c2cd3bd90502ac5e8ab3_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/095/243/230/15775276647/1bcdc5476bb84707ca0f3297fd5e4b8b_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/221/241/243/13988186546/97c02cc3f71554aecf3b08b72df514fe_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/240/036/189/9087176209/a8fa1def7f671531822f962aa13242d2_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/036/154/150/14777151044/8f1576c26f6ddd6587daec81cc566562_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/091/063/224/17024624702/5f40d66b0c635c5f4a4af4ca4e842fb2_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/060/230/104/14542709736/917bf9eb9bf168ba94c7cf7dd37cdb5c_70x70.jpg?b=1">
</div>
<div class="wrapper" id="wrapper2">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/064/076/068/10871010329/85d6a815d43af7becda60bd942be1058_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/231/091/046/14045893768/a8ac9d9cede8f457b1cf3ef17164bbb1_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/004/115/065/15695236389/a82b208e0c20c2cd3bd90502ac5e8ab3_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/095/243/230/15775276647/1bcdc5476bb84707ca0f3297fd5e4b8b_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/221/241/243/13988186546/97c02cc3f71554aecf3b08b72df514fe_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/240/036/189/9087176209/a8fa1def7f671531822f962aa13242d2_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/036/154/150/14777151044/8f1576c26f6ddd6587daec81cc566562_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/091/063/224/17024624702/5f40d66b0c635c5f4a4af4ca4e842fb2_70x70.jpg?b=1">
    <img width="130" src="http://www.yuetaojie.com/App/Tpl/Home/Default/Public/images/transparent.gif" data-original="http://img1.wgsails.com/yuetaojie/items/060/230/104/14542709736/917bf9eb9bf168ba94c7cf7dd37cdb5c_70x70.jpg?b=1">
</div>
<script type="text/javascript" src="http://test.yuetaojie.com/App/Tpl/Home/Default/Public/js/common.js"></script> 
<script type="text/javascript" src="../Public/js/lazyload.js"></script> 
<script type="text/javascript">
Y.lazyload({
    elem:[Y.$id("wrapper").getElementsByTagName("img"),Y.$id("wrapper2").getElementsByTagName("img")]
});
</script>

 

/*
* 调用:
*    Y.lazyload({
*        elem : [Y.$id(xx).getElementsByTagName('img'),Y.$id(xx2).getElementsByTagName('img')],
*        original : 'data-original',
*        container : 'document',
*        event : 'scroll',
*        fadeIn : true
*    });
* author:lq
* version : 0.1
* 备注：目前只支持scroll事件，后期添加事件拓展
*/
Y.lazyload = function(config){
    config = Y.extend({
        elem        :   'lazyload',
        original    :   'data-original', // String          存放图片真实地址的属性
        container   :   document,        // DOM / Selector 默认的容器为document，可自定义容器
        event       :   'scroll',   // String            触发事件类型，默认为window.onscroll事件                
        fadeIn      :   true,      // Boolean        是否使用fadeIn效果来显示                
    },config);
    var imgNodes = config.elem,
    imgArray = [],
    original = config.original,
    container = config.container['body'] || config.container['documentElement'],
    event = config.event,
    dataName = 'imglazyload_offset';        
    
    //遍历获取图片集合
    for(var j=0;j<imgNodes.length;j++){
        var oE = imgNodes[j];
        if(oE){
            for(var t=0;t<oE.length;t++){
                imgArray.push(oE[t]);    
            }    
        }    
    }
    //图片加载开始
    var loader = function( triggerElem, event ){
        var i = 0,ObjPoint, elem, lazySrc,
        top = (document.body.scrollTop || document.documentElement.scrollTop),height = document.documentElement.clientHeight;
        
        for( ; i < imgArray.length; i++ ){    
            elem = imgArray[i];
            if(elem.className=="imglazyload_offset"){continue;};
            lazySrc = elem.getAttribute( config.original );            
            if( !lazySrc || elem.src === lazySrc ){
                continue;
            }
            //当前图片的绝对位置
            ObjPoint = Y.getObjPoint(elem).y; 
            if(ObjPoint>=top&&ObjPoint<=(top+height)){
                // 加载图片
                elem.src = lazySrc;
                elem.className = dataName;
                //是否增加透明度变化
                if(!config.fadeIn) return ;
                Y.toFadeIn(elem);
            }
        }        
    };
    
    var fire = function( e ){
        loader( this, e.type );
    };
    // 绑定事件
    Y.attachEvent(window,event,fire);
    Y.attachEvent(window,'resize',fire);
    // 初始化
    loader();
    return this;    
};