两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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="630" height="420" 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(0));

            }

        };

        //动态显示数据

        var loading = function() {

            var contHeight = params.container.height();

            if (params.container.get(0) === 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 >= 0 && post < contHeight) || (posb > 0 && 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.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...
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 ...

随机推荐

C# 使用Epplus导出数据到Excel
简介:Epplus是一个使用Open Office XML(Xlsx)文件格式,能读写Excel 2007/2010文件的开源组件功效:支持对excel文档的汇入汇出,图表(excel自带的图表基本 ...
20191114PHP文件操作
<meta charset="utf-8"><?php// $fn=fopen("c:\\abc.txt","w"); / ...
react native 打包至iphone设备
1.新建bundle 在自己项目的ios文件夹下新建一个文件夹取名bundle PS:ios文件夹和node_modules文件夹在同一级目录下,这个bundle文件夹名称随意取,后面要用到,但是记得 ...
在CNN上增加一层CAM告诉你CNN到底关注什么
Cam(Class Activation Mapping)是一个很有意思的算法,他能够将神经网络到底在关注什么可视化的表现出来.但同时它的实现却又如此简介,相比NIN,googLenet这些使用GAP ...
两个对象值相同(x.equals(y)==true),hashcode也相同
不对,如果两个对象x和y满足x.equals(y) == true,它们的哈希码(hash code)应当相同.Java对于eqauls方法和hashCode方法是这样规定的:(1)如果两个对象相同( ...
Hibernate 一对一(基于唯一外键的关联)
主表 hbm.xml中使用<one-to-one> 从表hbm.xml中使用<many-to-one> 并指定unique=true people.hbm.xml: < ...
git,提交错了分支，想把远程的分支恢复到上一个版本
1.先将本地分支回滚到上一个版本 2.删除远程分支(可以先备份一下) 3.创建新的分支,将本地分支push上去
牛客网NOIP赛前集训营-提高组（第六场） C-树
题目描述有一棵有 n 个结点的树,每条边有编号为 0,1,2 的三种颜色,刚开始每条边颜色都为 0 . 现在有 3 种操作: $1\ x\ y\ col$ ,表示询问 $x$ 到 $y$ ...
厉害了！新AI人工智能研究令人大开眼界
AI人工智能有很多方法可以操纵照片,让您看起来更好看,消除红眼或镜头眩光等等.但到目前为止,眨眼已经证明了一个顽强的快照对手. 这远远不是智能“绘画中”的唯一例子,因为当一个程序用它认为属于的地方填充 ...
SpringCloud-Nexfilx
1.概述 Spring Cloud Netflix provides Netflix OSS integrations for Spring Boot apps through autoconfigu ...

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

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

随机推荐

热门专题