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);
  • 相关阅读:
    Javascript的作用域、作用域链以及闭包
    C#当中的泛型和java中的对比
    MongoDB的主从复制和副本集
    MongoDB启动配置等
    JavaScript学习系列1 基础-变量
    Umbraco项目发布错误 --More than one type want to be a model for content type authorize
    项目中gulp使用发生的错误及解决
    JavaScript学习系列2一JavaScript中的变量作用域
    ASP.NET MVC中的ActionFilter介绍学习
    Razor中的 内容标记块语法
  • 原文地址:https://www.cnblogs.com/superfeeling/p/4249549.html
Copyright © 2011-2022 走看看