两种图片延迟加载的方法总结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 ...

随机推荐

JS将人民币小写金额转换为大写
/** 数字金额大写转换(可以处理整数,小数,负数) */ function smalltoBIG(n) { var fraction = ['角', '分']; var digit = ['零', ...
一键部署基于GitLab的自托管Git项目仓库
https://market.azure.cn/Vhd/Show?vhdId=9851&version=11921 产品详情产品介绍GitLab https://about.gitlab.c ...
ftp和sftp
一.ftp ftp是文件传输协议,ftp协议包括两部分,一个是ftp客户端,另一个是ftp服务器. 原理:一般情况下,当使用FTP服务的时候,我们都知道默认是21号端口,其实还有一个20号端口.FTP ...
smtplib.SMTPDataError: (554, b'DT:SPM 163 smtp10,DsCowAA3nir1u6xZq42WDw--.22935S2 1504492533,please
# from email.mime.text import MIMEText # # msg = MIMEText('hello, send by Python...', 'plain', 'utf- ...
Lodash.js常用拷贝
lodash.js 降低 array.number.objects.string 等等的使用难度从而让 JavaScript 变得更简单.非常适用于:遍历 array.object 和 string: ...
acdream 小晴天老师系列——我有一个数列！（ST算法）
小晴天老师系列——我有一个数列! Time Limit: 20000/10000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others)S ...
windows 密钥
server 2016数据中心CB7KF-BWN84-R7R2Y-793K2-8XDDG
[VC]char 和 wchar_t相互转化
#include <windows.h> #include <stdio.h> //function: charTowchar //purpose:char to WCHAR ...
Codeforces Round #Pi (Div. 2) 567E President and Roads ( dfs and similar, graphs, hashing, shortest paths )
图给得很良心,一个s到t的有向图,权值至少为1,求出最短路,如果是一定经过的边,输出"YES",如果可以通过修改权值,保证一定经过这条边,输出"CAN",并且输 ...
UVA 1611 Crane 起重机（子问题）
题意:给一个1~n排列,1<=n<=10000,每次操作选取一个长度为偶数的连续区间.交换前一半和后一半,使它变成升序. 题解:每次只要把最小的移动到最左边,那么问题规模就缩小了.假设当前 ...

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

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

随机推荐

热门专题