两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了，其中jquery.lazyload.js的调用方法因为有网友爆出的bug，改进了调用方法，另外修改了关于浏览器IE版本的判断。以下直接为代码，并没有什么修改。做个记号。

两种方法都采用jquery-1.8.3.min.js版本。

jquery.scrollLoading方法

html

<!DOCTYPE html>

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

<head>

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

<title></title>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="Scripts/jquery.scrollLoading.js"></script>

<script>

    $(function(){

        $(".scrollLoading").scrollLoading();

    });

</script>

</head>

<body>

    <h2>页面图片等元素滚动动态加载技术</h2>

    <br />

    <img class="scrollLoading" data-url="images/mm/00_00.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_01.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_02.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_03.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_04.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_05.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_06.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_07.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_08.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_09.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

</body>

</html>

/*!

 * jquery.scrollLoading.js

 * by zhangxinxu http://www.zhangxinxu.com/wordpress/?p=1259

 * 2010-11-19 v1.0

 * 2012-01-13 v1.1 偏移值计算修改 position → offset

 * 2012-09-25 v1.2 增加滚动容器参数, 回调参数

 * 2014-08-11 v1.3 修复设置滚动容器参数一些bug, 以及误删posb值的一些低级错误

*/

(function($) {

    $.fn.scrollLoading = function(options) {

        var defaults = {

            attr: "data-url",

            container: $(window),

            callback: $.noop

        };

        var params = $.extend({}, defaults, options || {});

        params.cache = [];

        $(this).each(function() {

            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);

            //重组

            var data = {

                obj: $(this),

                tag: node,

                url: url

            };

            params.cache.push(data);

        });

        var callback = function(call) {

            if ($.isFunction(params.callback)) {

                params.callback.call(call.get());

            }

        };

        //动态显示数据

        var loading = function() {

            var contHeight = params.container.height();

            if (params.container.get() === window) {

                contop = $(window).scrollTop();

            } else {

                contop = params.container.offset().top;

            }        

            $.each(params.cache, function(i, data) {

                var o = data.obj, tag = data.tag, url = data.url, post, posb;

                if (o) {

                    post = o.offset().top - contop, posb = post + o.height();

                    if ((post >=  && post < contHeight) || (posb >  && posb <= contHeight)) {

                        if (url) {

                            //在浏览器窗口内

                            if (tag === "img") {

                                //图片，改变src

                                callback(o.attr("src", url));

                            } else {

                                o.load(url, {}, function() {

                                    callback(o);

                                });

                            }

                        } else {

                            // 无地址，直接触发回调

                            callback(o);

                        }

                        data.obj = null;

                    }

                }

            });

        };

        //事件触发

        //加载完毕即执行

        loading();

        //滚动执行

        params.container.bind("scroll", loading);

    };

})(jQuery);

jquery.lazyload.js方法

html

<!DOCTYPE html>

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

<head>

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

<title></title>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/jquery.lazyload.js"></script>

<script>

    function checkbrowse() {

        var ua = navigator.userAgent.toLowerCase();

        var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];

        var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';

        var v = (ua.match(new RegExp(r)) || [])[1];

        jQuery.browser.is = is;

        jQuery.browser.ver = v;

        return {

            'is': jQuery.browser.is,

            'ver': jQuery.browser.ver

        }

    }

    var public = checkbrowse();

    var showeffect = "";

    if ((public['is'] == 'msie' && public['ver'] < 8.0)) {

        showeffect = "show"

    } else {

        showeffect = "fadeIn"

    } 

    $(function(){

        $("img").lazyload({

            threshold : 200,

            effect : showeffect

         });

    });

</script>

</head>

<body>

    <h2>页面图片等元素滚动动态加载技术</h2>

    <br />

    <img original="images/mm/1.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/2.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/3.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/4.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/5.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/6.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/7.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/8.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/9.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/10.jpg" src="data:images/loading.gif" width="630" height="420" />

</body>

</html>

/*

* Lazy Load - jQuery plugin for lazy loading images

*

* Copyright (c) 2007-2009 Mika Tuupola

*

* Licensed under the MIT license:

*   http://www.opensource.org/licenses/mit-license.php

*

* Project home:

*   http://www.appelsiini.net/projects/lazyload

*

* Version:  1.5.0

*

*/

(function ($) {
    //判断客户端浏览器

    function checkbrowse() {

        var ua = navigator.userAgent.toLowerCase();

        var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];

        var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';

        var v = (ua.match(new RegExp(r)) || [])[1];

        jQuery.browser.is = is;

        jQuery.browser.ver = v;

        return {

            'is': jQuery.browser.is,

            'ver': jQuery.browser.ver

        }

    }

    var public = checkbrowse();

    $.fn.lazyload = function (options) {

        var showeffect = "";

        if ((public['is'] == 'msie' && public['ver'] < 8.0)) {

            showeffect = "show";

        } else {

            showeffect = "fadeIn";

        }

        var settings = {

            threshold: 0,

            failurelimit: 0,

            event: "scroll",

            effect: showeffect,

            container: window

        };

        if (options) {

            $.extend(settings, options);

        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */

        var elements = this;

        if ("scroll" == settings.event) {

            $(settings.container).bind("scroll", function (event) {

                var counter = 0;

                elements.each(function () {

                    if ($.abovethetop(this, settings) ||

$.leftofbegin(this, settings)) {

                        /* Nothing. */

                    } else if (!$.belowthefold(this, settings) &&

!$.rightoffold(this, settings)) {

                        $(this).trigger("appear");

                    } else {

                        if (counter++ > settings.failurelimit) {

                            return false;

                        }

                    }

                });

                /* Remove image from array so it is not looped next time. */

                var temp = $.grep(elements, function (element) {

                    return !element.loaded;

                });

                elements = $(temp);

            });

        }

        this.each(function () {

            var self = this;

            //删除的代码

            /* When appear is triggered load original image. */

            $(self).one("appear", function () {

                if (!this.loaded) {

                    $("<img />").bind("load", function () {

                        $(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);

                        self.loaded = true;

                    }).attr("src", $(self).attr("original"));

                };

            });

            /* When wanted event is triggered load original image */

            /* by triggering appear.                              */

            if ("scroll" != settings.event) {

                $(self).bind(settings.event, function (event) {

                    if (!self.loaded) {

                        $(self).trigger("appear");

                    }

                });

            }

        });

        /* Force initial check if images should appear. */

        $(settings.container).trigger(settings.event);

        return this;

    };

    /* Convenience methods in jQuery namespace.           */

    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function (element, settings) {

        if (settings.container === undefined || settings.container === window) {

            var fold = $(window).height() + $(window).scrollTop();

        } else {

            var fold = $(settings.container).offset().top + $(settings.container).height();

        }

        return fold <= $(element).offset().top - settings.threshold;

    };

    $.rightoffold = function (element, settings) {

        if (settings.container === undefined || settings.container === window) {

            var fold = $(window).width() + $(window).scrollLeft();

        } else {

            var fold = $(settings.container).offset().left + $(settings.container).width();

        }

        return fold <= $(element).offset().left - settings.threshold;

    };

    $.abovethetop = function (element, settings) {

        if (settings.container === undefined || settings.container === window) {

            var fold = $(window).scrollTop();

        } else {

            var fold = $(settings.container).offset().top;

        }

        return fold >= $(element).offset().top + settings.threshold + $(element).height();

    };

    $.leftofbegin = function (element, settings) {

        if (settings.container === undefined || settings.container === window) {

            var fold = $(window).scrollLeft();

        } else {

            var fold = $(settings.container).offset().left;

        }

        return fold >= $(element).offset().left + settings.threshold + $(element).width();

    };

    /* Custom selectors for your convenience.   */

    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {

        "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",

        "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",

        "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",

        "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"

    });

})(jQuery);

两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js的更多相关文章

两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js---转载
jquery.scrollLoading方法 html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...
WPF 下两种图片合成或加水印的方式（转载）
来源:http://www.cnblogs.com/lxblog/ 最近项目中应用多次应用了图片合成,为了今后方便特此记下. 在WPF下有两种图片合成的方式,一种还是用原来C#提供的GDI+方式,命名 ...
两种ps切图方法（图层/切片）
两种Ps切图方法一．基础操作: a) Ctrl++ 放大图片,ctrl - -缩小图片 b) 按住空格键space+,点击鼠标左键,拖动图片. c) 修改单位,点击编辑 ...
Convert between cv::Mat and QImage 两种图片类转换
在使用Qt和OpenCV混合编程时,我们有时需要在两种图片类cv::Mat和QImage之间进行转换,下面的代码参考了网上这个帖子: //##### cv::Mat ---> QImage ## ...
C#两种创建快捷方式的方法
C#两种创建快捷方式的方法http://www.cnblogs.com/linmilove/archive/2009/06/10/1500989.html
HTTP/HTTPS GET&POST两种方式的实现方法
关于GET及POST方式的区别请参照前面文章:http://www.cnblogs.com/hunterCecil/p/5698604.html http://www.cnblogs.com/hunt ...
iOS - UITableView中有两种重用Cell的方法
UITableView中有两种重用Cell的方法: - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier; - (id)dequ ...
Eclipse中SVN的安装步骤（两种）和使用方法
Eclipse中SVN的安装步骤(两种)和使用方法一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.下载最新的Eclipse,我的 ...
TextView两种显示link的方法
TextView两种显示link的方法一.简介也是TextView显示文本控件两种方法也是显示丰富的文本二.方法 TextView两种显示link的方法 1)通过TextView里面的类ht ...

随机推荐

Spring Boot 集成 PageHelper
配置一:在 [pom.xml] 文件中引入依赖  <dependency> <groupId>com.github.pag ...
邮箱/邮件地址的正则表达式及分析(JavaScript，email，regex)
简言在做用户注册时,常会用到邮箱/邮件地址的正则表达式.本文列举了几种方案,大家可以根据自己的项目情况,选择最适合的方案. 方案1 (常用) 规则定义如下: 以大写字母[A-Z].小写字母[a-z] ...
jquery中使用each遍历。
一直知道each这个方法,但是就是不太明白到底怎么用,今天两个地方都使用了each.真的太高兴了,太有成就感了. 东钿微信平台订单列表页全部订单之前是按照产调,评估,借款的顺序依次排下来,华总说要按 ...
css样式优先级问题
官方表述的CSS样式优先级如下: 通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式那么,我们来举个 ...
sqlserver创建触发器
Create TRIGGER [dbo].[tr_Delete_AllocationedDN] --删除指定账户已分配未拣货的任务 ON [dbo].[FRU_PickLocationNew] --触 ...
Mysql-数据库及数据表结构和操作
1.数据库系统:数据库系统是用来维护和管理数据库的系统工具,数据库系统拥有自己的用户名和密码 1.1.显示该系统中的数据库:Show databases; 1.2.创建数据库:Create datab ...
HDU 3001 Travelling （状压DP，3进制）
题意: 给出n<=10个点,有m条边的无向图.问:可以从任意点出发,至多经过同一个点2次,遍历所有点的最小费用? 思路: 本题就是要卡你的内存,由于至多可经过同一个点2次,所以只能用3进制来表示 ...
java面试题(杨晓峰)---第一讲谈谈你对java平台的理解
本人总结: 面向对象(封装,继承,多态) 平台无关性(jvm运行,class文件) 语言(泛型,lambda) 类库(集合,并发,网络,io/nio) jre(java运行环境,JVM,类库) JDK ...
Cocos2d-x数据相关的类用法简介（附示例）
(搬运自我在SegmentFault的博客) 在Cocos2d-x的学习和使用中,我遇到了很多关于数据的操作.在这个过程中,我学习了Cocos2d-x自带的很多功能.下面我把接触到的类罗列在下面,给出 ...
【转】IOS开发—IOS 8 中设置applicationIconBadgeNumber和消息推送
在IOS7中设置applicationIconBadgeNumber不会有什么问题,但是直接在IOS8中设置applicationIconBadgeNumber会报错因为在IOS8中要想设置appl ...

两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js的更多相关文章

随机推荐

热门专题