jq lazyload.js

红太狼 2022-02-04 09:11 356阅读 0赞

转自： [https://blog.csdn.net/ning109314/article/details/7042829][https_blog.csdn.net_ning109314_article_details_7042829] 和 [https://blog.csdn.net/yusirxiaer/article/details/79564372][https_blog.csdn.net_yusirxiaer_article_details_79564372]

目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。现在最流行使用的就是LazyLoad.js及scrollLoading.js这两个用Jquery写的小插件。

一、LazyLoad实现：

网上找到一个更好点的处理方式，以下方式转自http://www.poluoluo.com/jzxy/201110/145261.html：

//首先用JQ判断浏览器类型及版本，如果是IE8以下的浏览器就用effect=show，否则就用effect=fadeIn，判断浏览器版本函数如下  
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   
\}   
\}

//改造Jquery.LazyLoad.js函数，根据浏览器版本来显示不同的滤镜效果  
var public = checkbrowse();   
var showeffect = "";   
if ((public\['is'\] == 'msie' && public\['ver'\] < 8.0)) \{   
showeffect = "show"   
\} else \{   
showeffect = "fadeIn"   
\}   
jQuery(document).ready(function($) \{   
$("img").lazyload(\{   
placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif",   
effect: showeffect,   
failurelimit: 10   
\})   
\});  
</script>

html:

<img    src="/js/lazyload/pixel.gif" original="真实图片路径" />

而LazyLoad只是给你一个延迟加载的假象，每次图片都会加载两次，完全就是一个假象的延迟加载。可以修改LazyLoad文件实现真实延迟加载，本人比较懒，就直接在网上找了一个修改好的，嘿嘿

/\*  
\* 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 ($) \{  
    $.fn.lazyload = function (options) \{  
        var settings = \{  
            threshold: 0,  
            failurelimit: 0,  
            event: "scroll",  
            effect: "show",  
            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);  
二、scrollLoading实现

HTML：

scrollLoading的实现相对而言比较麻烦一下

如果需要对应的JS包请去下载：

http://download.csdn.net/detail/ning109314/3882760

简介

lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。

优点：

它可以提高页面加载速度；  
在某些情况清晰它也可以帮助减少服务器负载。  
安装

bower安装：

$ bower install jquery.lazyload  
npm安装:

$ npm install jquery-lazyload    
使用

lazyload依赖与jquery。所以先引入jquery和lazyload

<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="200">  
<script>  
    $(function()\{  
        $("img.lazy").lazyload();  
    \})  
</script>  
注意：必须设置图片的高度或者宽度，否则插件可能无法正常工作

提前加载——Threshold

lazyload默认是当滚动到该图片位置时，加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。

$(function()\{  
        $("img.lazy").lazyload(\{  
            threshold :20  
        \});  
    \})  
上面的例子设置了滚动到距离图片20px时，图片就开始再开始加载

事件触发(可以是jquery事件，也可以是自定义事件)——Event

当触发定义的事件时，图片才开始加载

$(function()\{  
        $("img.lazy").lazyload(\{  
            event : "click"  
        \});  
    \})  
上面的例子使图片点击后，才开始加载

Tip:你可以使用这个来实现图片的延迟加载

$(function() \{  
    $("img.lazy").lazyload(\{  
        event : "sporty"  
    \});  
\});  
   
$(window).bind("load", function() \{  
    var timeout = setTimeout(function() \{  
        $("img.lazy").trigger("sporty")  
    \}, 5000);  
\});  
上面的代码在页面加载完毕后五秒才开始加载图片

设定效果——Effects

插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()

$("img.lazy").lazyload(\{  
    effect : "fadeIn"  
\});  
滚动容器内的图片——container

插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar，内容的内容进行滚动，滚到图片位置时，图片开始加载

<div style="height:600px;overflow:scroll" id="container">  
    <img class="lazy" data-original="img/example.jpg"  alt="" style="margin-top:1000px" height="200">  
</div>  
<script>  
    $(function()\{  
        $("img.lazy").lazyload(\{  
            container: $("\#container")  
        \});  
    \})  
</script>  
不顺序排列的图片

插件会执行一个寻找未加载图片的循坏，该循环会检查图片是否可见，默认情况下，当第一个视图外的图片被找到，循环就会停止 。  
但是存在一种情况：页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 ，它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。  
代码：

$("img.lazy").lazyload(\{  
    failure\_limit : 10  
\});  
处理隐藏图片——skip\_invisible

为了提升性能，插件默认忽略隐藏的图片；如果想要加载隐藏图片.设置skip\_invisible为false;

注意：Webkit浏览器将自动把没有宽度和高度的图像视为不可见

$("img.lazy").lazyload(\{  
    skip\_invisible : true  
\});

[https_blog.csdn.net_ning109314_article_details_7042829]: https://blog.csdn.net/ning109314/article/details/7042829
[https_blog.csdn.net_yusirxiaer_article_details_79564372]: https://blog.csdn.net/yusirxiaer/article/details/79564372