zoukankan      html  css  js  c++  java
  • 两种图片延迟加载的方法总结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="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="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="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="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="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="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="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="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="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="images/pixel.gif" width="630" height="420" style="background:url(images/loading.gif) no-repeat center;" />
    </body>
    </html>

    js

    /*!
     * 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(/(chrome|opera|safari|msie|firefox)/) || ['', '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="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/2.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/3.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/4.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/5.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/6.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/7.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/8.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/9.jpg" src="images/loading.gif" width="630" height="420" />
        <br /><br /><br /><br /><br /><br />
        <img original="images/mm/10.jpg" src="images/loading.gif" width="630" height="420" />
    </body>
    </html>

    js

    /*
    * 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(/(chrome|opera|safari|msie|firefox)/) || ['', '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);
  • 相关阅读:
    不可或缺 Windows Native (15)
    不可或缺 Windows Native (14)
    不可或缺 Windows Native (13)
    不可或缺 Windows Native (12)
    不可或缺 Windows Native (11)
    不可或缺 Windows Native (10)
    不可或缺 Windows Native (9)
    不可或缺 Windows Native (8)
    不可或缺 Windows Native (7)
    不可或缺 Windows Native (6)
  • 原文地址:https://www.cnblogs.com/superfeeling/p/4249549.html
Copyright © 2011-2022 走看看