Lazy Loading von Bildern und Anwendungsbeispiele von jquery.lazyload.js

Das verzögerte Laden von Bildern wird manchmal in Projekten verwendet. Welche Vorteile bietet das verzögerte Laden?

Ich denke, es gibt zwei Hauptpunkte: Das Verzögern des Ladens von Bildern auf langen Seiten, die viele große Bilder enthalten, kann das Laden der Seite beschleunigen.

Im Folgenden werden das häufig verwendete Lazy-Loading-Plug-In jquery.lazyload.js und die Implementierung eines Lazy-Loading-Plug-Ins vorgestellt.

1: jquery.lazyload.js-Plugin

Lazyload ist ein von jQuery geschriebenes Lazy-Loading-Plugin. Bilder außerhalb des sichtbaren Bereichs des Browsers werden erst geladen Der Benutzer scrollt durch die Seite, wo er sich befindet. Dies ist das genaue Gegenteil davon, wie das Vorladen von Bildern gehandhabt wird.

Implementierungsprinzip

Erstens ist das ausgewählte img-Element an ein Erscheinungsereignis gebunden (Verarbeitung des img, um die echte Bildadresse anzuzeigen), sodass das Ereignis ausgelöst werden kann, wenn die Bedingungen erfüllt sind in der Zukunft;

Es gibt eine Containerattributkonfiguration, die standardmäßig „window“ ist. Wenn sich das img-Element im Container-Container-Ansichtsfenster befindet, wird das Erscheinungsereignis ausgelöst Um festzustellen, ob sich das IMG-Element im Container-Ansichtsbereich befindet, gibt es die folgenden vier Methoden:

$.belowthefold = function(element, settings) {};    // 在视口下方$.rightoffold = function(element, settings) {};        // 在视口右方$.abovethetop = function(element, settings) {};        // 在视口上方$.leftofbegin = function(element, settings) {};        // 在视口左方

Spezifische Verwendung

1

Da Lazyload auf JQuery basiert, müssen alle Seiten JQuery wie folgt einführen:

<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>

Grundlegende Schreibmethode:

<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
    $("img.lazy").lazyload();
});

Das data-original-Attribut speichert den echten Bild-URL-Pfad.

Tipps: Sie müssen die Breite oder Höhe des Bildes in CSS festlegen, sonst funktioniert das Plugin möglicherweise nicht richtig.

Schwellenwert festlegen

Standardmäßig wird das Bild geladen, wenn es auf dem Bildschirm angezeigt wird. Wenn Sie das Bild im Voraus laden möchten, können Sie die Schwellenwertoption festlegen Schwellenwert auf 200, sodass das Bild 200 Pixel im Voraus geladen wird.

$("img.lazy").lazyload({
    threshold : 200});

Ereignis festlegen, um das Laden auszulösen

Das Ereignis kann ein beliebiges jQuery-Ereignis sein, z. B.: Klicken und Mouseover. Sie können auch benutzerdefinierte Ereignisse verwenden, z. B : sportlich und foobar. Standardmäßig warten sie, bis der Benutzer zur Position des Bildes im Fenster scrollt. Um zu verhindern, dass das Bild geladen wird, können Sie Folgendes tun:

$("img.lazy").lazyload({
    event : "click"});

Natürlich können Sie auch die folgende Methode verwenden, um Lazy Loading zu implementieren:

$(function() {
    $("img.lazy").lazyload({
        event : "sporty"});
});

$(window).bind("load", function() {var timeout = setTimeout(function() {
        $("img.lazy").trigger("sporty")
    }, 5000);
});

Das heißt, 5 Sekunden nach dem Laden der Seite, Lazy Das Laden des Bildes wird durchgeführt.

Lazy-Loading-Effekt

Wenn das Bild vollständig geladen ist, verwendet das Plug-in standardmäßig die Methode show(), um das Bild anzuzeigen. Tatsächlich können Sie alle gewünschten Spezialeffekte verwenden Zu verarbeiten. Unten: Der Code verwendet den FadeIn-Effekt:

$("img.lazy").lazyload({
    effect : "fadeIn"});

So verwenden Sie Browser, die kein JavaScript unterstützen

JavaScript ist jedoch in fast allen Browsern aktiviert. Möglicherweise möchten Sie dennoch echte Bilder auf Clients anzeigen, die kein JavaScript unterstützen. Für eine ordnungsgemäße Verschlechterung können Sie das echte Bildfragment in das

<img class="lazy" data-original="img/example.jpg"  width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

Platzhalter können über CSS ausgeblendet werden:

.lazy {
  display: none;
}

In Browsern, die JavaScript unterstützen, müssen Sie den Platzhalter anzeigen, wenn Sie bereit sind , was gleichzeitig mit der Initialisierung des Plugins erfolgen kann.

$("img.lazy").show().lazyload();

Richten Sie einen Lazy-Loaded-Bildcontainer ein

Sie können das Plugin für Bilder in scrollbaren Containern verwenden, z. B. für DIV-Elemente mit Bildlaufleisten Sie müssen lediglich den Container als jQuery-Objekt definieren und ihn als Parameter an die Initialisierungsmethode übergeben:

#container {
    height: 600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
    container: $("#container")
});

Wenn die Bilder nicht in der richtigen Reihenfolge angeordnet sind

Wenn die Seite gescrollt wird, durchläuft Lazy Load eine Schleife durch die geladenen Bilder. Während der Schleife wird überprüft, ob sich das Bild im sichtbaren Bereich befindet. Standardmäßig stoppt die Schleife, wenn das erste Bild nicht im sichtbaren Bereich liegt Es wird davon ausgegangen, dass das Bild gestreamt wird, und die Reihenfolge ist dieselbe wie im HTML-Code. In einigen Layouts ist diese Annahme jedoch nicht wahr Verhalten durch die Option faillimit.

$("img.lazy").lazyload({ 
    failure_limit : 10});

Setzen Sie die Fehlergrenze auf 10, damit das Plug-in die Suche erst beendet, wenn es 10 Bilder findet, die nicht im sichtbaren Bereich sind. Bitte stellen Sie diesen Parameter höher ein.

Eingestellt, um versteckte Bilder zu laden

Auf Ihrer Seite können viele versteckte Bilder verborgen sein. Beispielsweise wird das Plug-in zum Filtern der Liste verwendet, und Sie können die Anzeige dieser ständig ändern Um die Leistung zu verbessern, ignoriert Lazy Load standardmäßig ausgeblendete Bilder. Wenn Sie ausgeblendete Bilder laden möchten, legen Sie „skip_invisible“ fest.

$("img.lazy").lazyload({
    skip_invisible : true});

Quellcode

Offizielle Website-Adresse:

/*!
     * Lazy Load - jQuery plugin for lazy loading images
     *
     * Copyright (c) 2007-2015 Mika Tuupola
     *
     * Licensed under the MIT license:
     *   
     *
     * Project home:
     *   
     *
     * Version:  1.9.7
     *     */
    (function($, window, document, undefined) {var $window = $(window);
    
        $.fn.lazyload = function(options) {var elements = this;var $container;var settings = {
                threshold       : 0,
                failure_limit   : 0,
                event           : "scroll",
                effect          : "show",
                container       : window,
                data_attribute  : "original",
                skip_invisible  : false,
                appear          : null,
                load            : null,
                placeholder     : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};    function update() {var counter = 0;
    
                elements.each(function() {var $this = $(this);if (settings.skip_invisible && !$this.is(":visible")) {return;
                    }if ($.abovethetop(this, settings) ||$.leftofbegin(this, settings)) {/* Nothing. */} else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $this.trigger("appear");/* if we found an image we'll load, reset the counter */counter = 0;
                    } else {if (++counter > settings.failure_limit) {return false;
                        }
                    }
                });
    
            }    if(options) {/* Maintain BC for a couple of versions. */if (undefined !== options.failurelimit) {
                    options.failure_limit = options.failurelimit;delete options.failurelimit;
                }if (undefined !== options.effectspeed) {
                    options.effect_speed = options.effectspeed;delete options.effectspeed;
                }
    
                $.extend(settings, options);
            }    /* Cache container as jQuery as object. */$container = (settings.container === undefined ||  settings.container === window) ? $window : $(settings.container);    /* Fire one scroll event per scroll. Not one scroll event per image. */if (0 === settings.event.indexOf("scroll")) {
                $container.bind(settings.event, function() {return update();
                });
            }    this.each(function() {var self = this;var $self = $(self);
    
                self.loaded = false;    /* If no src attribute given use data:uri. */if ($self.attr("src") === undefined || $self.attr("src") === false) {if ($self.is("img")) {
                        $self.attr("src", settings.placeholder);
                    }
                }    /* When appear is triggered load original image. */$self.one("appear", function() {if (!this.loaded) {if (settings.appear) {var elements_left = elements.length;
                            settings.appear.call(self, elements_left, settings);
                        }
                        $("<img />")
                            .bind("load", function() {    var original = $self.attr("data-" + settings.data_attribute);
                                $self.hide();if ($self.is("img")) {
                                    $self.attr("src", original);
                                } else {
                                    $self.css("background-image", "url('" + original + "')");
                                }
                                $self[settings.effect](settings.effect_speed);
    
                                self.loaded = true;    /* Remove image from array so it is not looped next time. */var temp = $.grep(elements, function(element) {return !element.loaded;
                                });
                                elements = $(temp);    if (settings.load) {var elements_left = elements.length;
                                    settings.load.call(self, elements_left, settings);
                                }
                            })
                            .attr("src", $self.attr("data-" + settings.data_attribute));
                    }
                });    /* When wanted event is triggered load original image *//* by triggering appear.                              */if (0 !== settings.event.indexOf("scroll")) {
                    $self.bind(settings.event, function() {if (!self.loaded) {
                            $self.trigger("appear");
                        }
                    });
                }
            });    /* Check if something appears when window is resized. */$window.bind("resize", function() {
                update();
            });    /* With IOS5 force loading images when navigating with back button. *//* Non optimal workaround. */if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
                $window.bind("pageshow", function(event) {if (event.originalEvent && event.originalEvent.persisted) {
                        elements.each(function() {
                            $(this).trigger("appear");
                        });
                    }
                });
            }    /* Force initial check if images should appear. */$(document).ready(function() {
                update();
            });    return this;
        };    /* Convenience methods in jQuery namespace.           *//* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
        $.belowthefold = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
            } else {
                fold = $(settings.container).offset().top + $(settings.container).height();
            }    return fold <= $(element).offset().top - settings.threshold;
        };
    
        $.rightoffold = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = $window.width() + $window.scrollLeft();
            } else {
                fold = $(settings.container).offset().left + $(settings.container).width();
            }    return fold <= $(element).offset().left - settings.threshold;
        };
    
        $.abovethetop = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = $window.scrollTop();
            } else {
                fold = $(settings.container).offset().top;
            }    return fold >= $(element).offset().top + settings.threshold  + $(element).height();
        };
    
        $.leftofbegin = function(element, settings) {var fold;    if (settings.container === undefined || settings.container === window) {
                fold = $window.scrollLeft();
            } else {
                fold = $(settings.container).offset().left;
            }    return fold >= $(element).offset().left + settings.threshold + $(element).width();
        };
    
        $.inviewport = function(element, settings) {             return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                    !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
         };    /* Custom selectors for your convenience.   *//* Use as $("img:below-the-fold").something() or *//* $("img").filter(":below-the-fold").something() which is faster */
        $.extend($.expr[":"], {"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },"above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },"in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },/* Maintain BC for couple of versions. */"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
        });
    
    })(jQuery, window, document);

Zwei: Handschrift eines einfachen Lazy-Loading-Plugs -in

JS-Code

window.smallDelay = (function(window, document, undefined) {'use strict';var store = [],poll;var settings = {
        offset:0, //离可视区域多少像素的图片可以被加载throttle: 250 //图片延时多少毫秒加载    }        var _inView = function(el) {var coords = el.getBoundingClientRect();return ((coords.top >= 0 && coords.left >= 0) && coords.top <= ((window.innerHeight || document.documentElement.clientHeight) + parseInt(settings.offset)));
    };var _pollImages = function() {for (var i = store.length; i--;) {var self = store[i];if (_inView(self)) {
                self.src = self.getAttribute(&#39;data-delay&#39;);
                store.splice(i, 1);
            }
        }
    };var _throttle = function() {
        clearTimeout(poll);
        poll = setTimeout(_pollImages, settings.throttle);
    };var init = function(obj) {var nodes = document.querySelectorAll(&#39;[data-delay]&#39;);var opts = obj || {};
        settings.offset = opts.offset || settings.offset;
        settings.throttle = opts.throttle || settings.throttle;for (var i = 0; i < nodes.length; i++) {
            store.push(nodes[i]);
        }

        _throttle();        //滚动监听执行图片懒加载if (document.addEventListener) {
            window.addEventListener(&#39;scroll&#39;, _throttle, false);
        } else {
            window.attachEvent(&#39;onscroll&#39;, _throttle);
        }        //返回该对象进行链式操作return this;
    };return {
        init: init,
        render: _throttle
    };

})(window, document);

Aufrufmethode:

smallDelay.init({
     offset: 0,//离可视区域多少像素的图片可以被加载　　 throttle: 0 //图片延时多少毫秒加载});

HTML-Code:

三：根据lazyload插件实现一个不依赖jQuery的懒加载插件

实现内容

1、增加了图片预加载可选

2、修改了图片本身就在可视范围的时候直接显示而不需要滚动条触发

3、修改了Splice删除数组的时候，会跳过下一张图片BUG

4、浏览器窗口resize的时候图片出现也会加载

5、判断图片父层包裹顶部或者底部出现在可视范围内即可显示图片

实现源码

var Lazy = {
        $:function(arg,context){var tagAll,n,eles=[],i,sub = arg.substring(1);
            context = context|| document;if(typeof arg =='string'){switch(arg.charAt(0)){case '#':return document.getElementById(sub);break;case '.':if(context.getElementsByClassName) return context.getElementsByClassName(sub);
                        tagAll = Lazy.$('*');
                        n = tagAll.length;for(i = 0;i<n;i++){if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                        }return eles;break;default:return context.getElementsByTagName(arg);break;
                }
            }
        },
        getPos:function (node) {var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                    scrollt = document.documentElement.scrollTop || document.body.scrollTop;var pos = node.getBoundingClientRect();return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
        },
        bind:function(node,type,handler){
            node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
        },
        unbind:function(node,type,handler){
            node.removeEventListener?node.removeEventListener(type, handler, false):node.detachEvent('on'+ type, handler);
        },
        toArray:function(eles){var arr = [];for(var i=0,n=eles.length;i<n;i++){
                arr.push(eles[i]);
            }return arr;
        }
    };function imgLazyLoad(){var timer,screenHeight = document.documentElement.clientHeight;// 选择所有图片var allimg = Lazy.$(&#39;img&#39;);// 筛选CLASS为lazyload的图片var elems = Lazy.$(&#39;.lazyload&#39;,allimg);// 转换为真正的数组elems = Lazy.toArray(elems);if(!elems.length) return;// 没有发生滚动事件时如果图片在可视范围之内，也显示for(var i = 0;i < elems.length;i++){// 获取图像的父元素即包裹图像的元素，判断图像是否在可视区域即直接判断父元素是否可视var parent = elems[i].parentNode;var pos = Lazy.getPos(parent);var posT = pos.top;var posB = pos.bottom;// 没有滚动条情况如果距离顶部的距离小于屏幕的高度则赋值SRCif(posT < screenHeight){
                elems[i].src = elems[i].getAttribute(&#39;data-img&#39;);// 移除后，数组的长度减一，下一个下标需减一elems.splice(i--,1);
            }
        }// 绑定scroll事件Lazy.bind(window,&#39;scroll&#39;,loading);
        Lazy.bind(window,&#39;resize&#39;,loading);function loading(){
            timer && clearTimeout(timer);
            timer = setTimeout(function(){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                screenHeight = document.documentElement.clientHeight;for(var i = 0;i < elems.length;i++){var parent = elems[i].parentNode;var pos = Lazy.getPos(parent);var posT = pos.top;var posB = pos.bottom;var screenTop = screenHeight+scrollTop;// 元素顶部出现在可视区  或者  元素底部出现在可视区if((posT > scrollTop && posT <  screenTop) || (posB > scrollTop && posB < screenTop)){
                        elems[i].src = elems[i].getAttribute(&#39;data-img&#39;);
                        elems.splice(i--,1);
                    }else{// 去掉以下注释开启图片预加载// new Image().src = elems[i].getAttribute(&#39;data-img&#39;);                    }
                }if(!elems.length){
                    Lazy.unbind(window,&#39;scroll&#39;,loading);
                    Lazy.unbind(window,&#39;resize&#39;,loading);
                }
            },300);
        }
    }
    imgLazyLoad();

使用方法

1、在图片上增加lazyload的类(class='lazyload')

2、把真实的图片地址放入自定义属性data-img 中，把图片的SRC属性设置为一个一像素的透明图片，图片需要设置width，height属性，以免布局混乱

如下：

<img data-img="a.jpg" src="loading.gif" width="640" height="480"   class=&#39;lazyload&#39;>

3、在需要延迟加载的页面调用imgLazyLoad()函数；

该原生js实现的懒加载转载地址：

Das obige ist der detaillierte Inhalt vonLazy Loading von Bildern und Anwendungsbeispiele von jquery.lazyload.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn