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

随机推荐

web常见几种处理图标方法
方法一: 用background制作小图标像这样,拿到设计稿后把所有的图标放在一张图片上,利用background-position.width.height来控制图标的位置及大小. 代码: .ic ...
canvas雪花特效-jQuery插件实现
这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...
【整站源码分享】分享一个JFinal3.4开发的整站源码，适合新手学习
分享这个源码是14年开发上线的<威海创业者>站点的全套整站源码,前后端都在一个包里.当时开发使用的是JFinal1.4,最近改成了JFinal3.4.使用的JSP做的页面.有一定的参考价值 ...
Python+selenium之疑难点解决之去除readonly的限制
去除文本框的readonly只读模式的限制如图所示:去除卡号readonly限制代码如图所示: js = 'document.getElementById("cardNo"). ...
selenium报错信息-- Python 中 'unicodeescape' codec can't decode bytes in position XXX: trun错误解决方案
本以为是缺少utf-8造成的错误,但是加完这个还是报错,于是在网上百度了一下是因为上传的路劲粗无偶导致的正确的写法是把路劲中“\”变为“\\”,或者在路劲的开头加上“r”,或者在路劲的开头加上“r” ...
UWP开发：应用设置存储
应用设置储存指的是保存在应用程序储存区中的键/值对的字典集合,它自动负责序列化对象,并将其保存在应用程序里.以键/值对方式提供一种快速数据访问的方式,主要用于储存一些应用信息. 1,简介应用设置是W ...
程序员的智囊库系列之3--分布式文件系统(Distributed file systems)
程序员的智囊库系列之3--分布式文件系统(Distributed file systems) 这是程序员的智囊库系列的第三篇文章.上一篇文章本来打算介绍几个搭建网站的框架,但由于这部分的内容较多,还需 ...
Xamarin 常见问题解决方案汇总
出现如下提示,错误: 找不到或无法加载主类 com.sun.tools.javac.MainMSB6006: 或閿欒: 绋嬪簭鍖卆ndroid.support.v4.view.ViewPager涓嶅 ...
WCFSVC文件的分离
项目结构图如下: 新建一个实现内容和接口的项目: 接口内部如下: using DataModel; using System; using System.Collections.Generic; us ...
[OpenMP] 并行计算入门
OpenMP并行计算入门个人理解 OpenMP是一种通过共享内存并行系统的多处理器程序设计的编译处理方案,通过预编译指令告诉编译器哪些代码块需要被并行化,通过拷贝代码块实现并行程序.对于循环的并行化 ...

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

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

随机推荐

热门专题