图片延迟加载jquery插件imgLazyLoading

实现了图片延迟加载功能，插件代码非常简洁，且每个功能都把注释写得非常详细，适合网友们学习，好好利用哦

引入图片延迟加载Jquery插件文件后，页面使用代码如下：

<script type="text/javascript" charset="utf-8">
    $(".lazyLoading").imgLazyLoading({
        // 记录图片真实地址的属性名
        url : "data-url",
        // 图片渐出效果以及渐出时间
        fadeIn : 400
    });
</script>

 

 

JS插件代码：

/**======================================
* 名称:imgLazyLoading
* 描述:基于jQuery的图片延迟加载插件
* 版本:1.0.1
* 日期:2013-6-18
* 兼容:在火狐,IE6-10,谷歌,360测试OK
* 来源:
使用方式:
<script type="text/javascript" charset="utf-8">
    $(".lazyLoading").imgLazyLoading({
        // 记录图片真实地址的属性名
        url : "data-url",
        // 图片渐出效果以及渐出时间
        fadeIn : 400
    });
</script>
如果用户禁用了JS解决方案
<noscript><img src="" /></noscript>
这是目前最简单和最有效的解决js在禁用
的情况下依然显示图片
=======================================**/

//定义匿名函数并立即执行
(function($){

    $.fn.imgLazyLoading = function(options)
    {
        //定义需要的参数的初始值,合并options对象然后赋值到变量set,如果存在相同的值那么进行覆盖
        var init = $.extend({url:"data-url",fadeIn:0},options || {});
        var cache = [];

        //为所有指定class="lazyloading"的元素执行这个匿名函数
        $(this).each(function()
        {
            var nodeName = this.nodeName.toLowerCase();//返回节点的名称,并且转换为小写
            var url = $(this).attr(init.url);//获取options参数的值
            //获取每个元素的信息,存入临时对象data里面,然后插入到cache对象
            var data = {
                obj : $(this),//当前选中的元素
                url : url,//图片指向地址
                tag : nodeName//节点的名字
            }
            cache.push(data);//向cache数组的末尾添加元素,并返回新的长度
        });

        var lazyLoading = function()
        {
            //用each函数遍历cache数组
            $.each(cache,function(key, val)
            {
                var obj = val.obj;
                var url = val.url;
                var tag = val.tag;
                if(obj)
                {
                    var winHeight = $(window).height();//当前窗口高度
                    var scrolltop = $(window).scrollTop();//滚动条偏移高度
                    var imgTop = obj.offset().top;//图片元素在当前视口的相对偏移
                    //判断是否在当前窗口内
                    if((imgTop-scrolltop) > 0 && (imgTop-scrolltop) < winHeight)
                    {
                        if(tag === "img")
                        {
                            if(init.fadeIn)
                            {
                                //渐出效果
                                obj.fadeIn(init.fadeIn);
                            }
                            //给src属性赋值
                            obj.attr("src", url);
                        }
                        else
                        {
                            return false;
                        }
                        val.obj = null;//清空,不清空会重复负责,重复请求
                    }
                }
            });
        }
        //加载后立即执行
        lazyLoading();
        //添加滚动事件
        $(window).bind("scroll",lazyLoading);
    };
})(jQuery);

JS