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

引入图片延迟加载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

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<title>网友猎人分享原创图片延迟加载jquery插件</title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script>

        window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')

    </script>

<script type="text/javascript" src="imglazyloading.js"></script>

</head>

<body>

    <div style="height:800px;width:700px; text-align:center; font-size:20px; font-weight:bold; margin:30px auto; color:#FF0000;">鼠标往下滚动就可以看到效果啦</div>

    <img  data-url="images/11235MW1-4.jpg" class="lazyLoading"/>

    <img  data-url="images/11235L447-3.jpg" class="lazyLoading"/>

    <img  data-url="images/11235L305-1.jpg" class="lazyLoading"/>

    <img  data-url="images/11235K258-0.jpg" class="lazyLoading"/>

    <script type="text/javascript" charset="utf-8">

    $(".lazyLoading").imgLazyLoading({

        // 记录图片真实地址的属性名

        url : "data-url",

        // 图片渐出效果以及渐出时间

        fadeIn : 4000

    });

</script>

</body>

</html>

HTML

转自：http://www.jq----school.com/Detail.aspx?id=282

图片延迟加载jquery插件imgLazyLoading的更多相关文章

  1. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  2. 图片延迟加载jquery插件imgLazyLoad(三)

    此Jquery插件是在图片加载前显示一个加载图片,当图片下载完毕后显示图片出来,可对图片进行是否自动缩放功能,此Jquery插件使用时可让页面先加载,而图片后加载的方式,解决了平时使用时要在图片显示出 ...

  3. 延迟加载图片的 jQuery 插件：Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

  6. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  7. 延迟加载图片的 jQuery 插件——lazyload.js

    lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...

  8. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  9. Lazy Load, 延迟加载图片的 jQuery 插件【备忘】

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ jQuery Unveil – 另一款非常轻量的延迟加载插件 http ...

随机推荐

  1. Ubuntu14.04下安装tomcat

    1.官方网站下载最新的tomcat:http://tomcat.apache.org/download-80.cgi在ubuntu上,我们下载zip和tar.gz.Ubuntu14.04安装和配置To ...

  2. ubuntu eclipse 不能新建javaweb项目解决方案

    ubuntu下,通过sudo apt-get install eclipse 成功安装了eclipse,可它简洁的都让我不知如何新建web project.网上查了众多资料,终于找到了一系列简洁的方法 ...

  3. Nginx 的编译安装和URL地址重写

    本文转自:http://www.178linux.com/14119#rd?sukey=ecafc0a7cc4a741b573a095a3eb78af6b4c9116b74d0bbc9844d8fc5 ...

  4. C#(winform)为button添加背景图片

    1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用  Button.Image = "" ...

  5. c#如何使输入数据类型限制，C#如何添加限制

    验证n位的数字:^\d{n}$ ,例如要输6位数字,不能多也不能少: ^\d{6}$ 验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$ ...

  6. 【HDU 5810多校】Balls and Boxes（打表/数学）

    1.打表找规律,下面是打表程序: #include <iostream> #include <cstdio> #define ll long long #define N 10 ...

  7. 【转】Handler学习笔记（一）

    一.Handler的定义: Handler主要接收子线程发送的数据, 并用此数据配合主线程更新UI,用来跟UI主线程交互用.比如可以用handler发送一个message,然后在handler的线程中 ...

  8. UML类图中的六种关系及实例【补充】

    ·继承和接口都比较常见,通过继承子类可以直接使用父类的(public,protected属性以及方法:而实现了Speakable接口的Person类必须定义其所有方法,包括speak()): ·依赖指 ...

  9. java高新技术-泛型

    1.体验泛型 泛型是提供给javac编译器使用的,可以限定集合中的输入类型,让编译器挡住源程序中的非法输入,编译器编译带类型说明的集合时去除掉"类型"信息,使程序运行小效率不受影响 ...

  10. [日常训练]常州集训day8

    T1 Description 给定一个长度为$n$的正整数序列$a$.可以将序列分成若干段,定义第$i$段的权值$x_i$为这一段中所有数的最大值,特殊地,$x_0=0$.求$\sum_{i=1}^{ ...