So implementieren Sie das Vorladen von Bildern und das verzögerte Laden mit Jquery

Das Beispiel in diesem Artikel beschreibt, wie Jquery das Vorladen von Bildern und das verzögerte Laden implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Bei vielen Projekten muss häufig festgestellt werden, ob entsprechende Vorgänge nach dem Laden des Bildes ausgeführt oder das Laden des Bildes verzögert werden sollen. Obwohl es im Internet bereits sehr gute Plug-Ins gibt, fühlt es sich immer etwas umständlich an Um für diese Effekte ein separates Plug-In laden zu müssen, habe ich mir einfach selbst eine Methode geschrieben:

Code kopieren Der Code lautet wie folgt:

Funktion Loadimg(arr,funLoading,funOnLoad,funOnError){

var numLoaded=0,

numError=0,

isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;

var arr=isObject ? arr.get() : arr;

for(a in arr){

var src=isObject ? $(arr[a]).attr("data-src") : arr[a];

preload(src,arr[a]);

}

Funktion preload(src,obj){

var img=new Image();

img.onload=function(){

numLoaded ;

funLoading && funLoading(numLoaded,arr.length,src,obj);

funOnLoad && numLoaded==arr.length && funOnLoad(numError);

};

img.onerror=function(){

numLoaded ;

numError ;

funOnError && funOnError(numLoaded,arr.length,src,obj);

}

img.src=src;

}

}

Parameterbeschreibung:

arr: Es kann ein Array zum Speichern des Bildpfads sein, oder es kann das JQuery-Objekt des ausgewählten Bildes sein; funLoading: Der Vorgang, der nach dem Laden jedes einzelnen Bildes ausgeführt wird; funOnLoad: Vorgang, nachdem alle Bilder geladen wurden; funOnError: Vorgang, wenn ein einzelner Bildladefehler auftritt.

Zum Beispiel:

Code kopieren Der Code lautet wie folgt:var imgonload=function(errors){ /*errors: Anzahl der Bilder mit Ladefehlern;*/

console.log("geladen," Fehler "Bilder geladener Fehler!");

}

var funloading=function(n,total,src,obj){

         /*

n: Die Anzahl der geladenen Elemente;
            total: die Gesamtzahl der zu ladenden Bilder;
                                                                                                                                                                         Mit dem aktuell geladenen Bildpfad;
​​​​ obj: Wenn das in der Loadimg-Funktion übergebene arr ein Array ist, das den Bildpfad speichert, ist obj=src der Bildpfad, 

Wenn arr ein Jquery-Objekt ist, ist obj das aktuell geladene img-dom-Objekt. 

*/

console.log(n „of“ total „ pic geladen.“,src);

var newimg = document.createElement("img");

newimg.src=src;

$("body").append(newimg).fadeIn();

}

var funloading_obj=function(n,total,src,obj){

console.log(n „of“ total „ pic geladen.“,src);

$(obj).attr("src",src);

$(obj).fadeIn(200);

}

var funOnError=function(n,total,src,obj){

console.log("der Fehler beim Laden des Bildes!");

}

Aufrufbeispiel:

Code kopieren

Der Code lautet wie folgt:console.log("loading..."); Loadimg($("img"),funloading_obj,imgonload,funOnError); /*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg", "/20120531/1670912_103610084349_2.jpg", "/20120616/4952071_130629530136_2.jpg",

"/20120610/1723580_105037029000_2.jpg",

„http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg“

],funloading,imgonload,funOnError);*/

Das Obige ist die ursprüngliche Schreibmethode. Als nächstes stellen wir ein jQuery-Plug-in zum verzögerten Laden von Bildern basierend auf Lazy Load vor

Lazy Load hängt von jQuery ab. Bitte fügen Sie den folgenden Code zum Kopfbereich der Seite hinzu:

Code kopieren

Der Code lautet wie folgt:

Sie müssen den HTML-Code im src-Attribut festlegen. Die Demoseite verwendet ein 1x1 Pixel großes GIF-Bild. Hier können Sie die URL des echten Bildes festlegen eine bestimmte Klasse, um das Lazy-Loading-Image-Objekt zu erhalten. Auf diese Weise können Sie Plugin-Bindungen einfach steuern.

Code kopieren Der Code lautet wie folgt:

Der Code zum Verarbeiten von Bildern lautet wie folgt.

Code kopieren Der Code lautet wie folgt:

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

Dies führt dazu, dass alle Bilder mit der Klasse „lazy“ träge geladen werden. Sie können sich auf die Demo der Grundoptionen beziehen

Empfindlichkeit einstellen

JavaScript ist in fast allen Browsern aktiviert. Möglicherweise möchten Sie jedoch dennoch echte Bilder auf Clients anzeigen, die JavaScript nicht unterstützen. Um dies ordnungsgemäß zu verhindern, können Sie echte Bildfragmente

Platzhalter können per CSS ausgeblendet werden.

Code kopieren Der Code lautet wie folgt:

.lazy {

Anzeige: keine;

}

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

Code kopieren Der Code lautet wie folgt:

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

Diese sind optional, sollten aber durchgeführt werden, wenn Sie möchten, dass Ihr Plugin ordnungsgemäß heruntergestuft wird.

Empfindlichkeit einstellen

Standardmäßig wird das Bild geladen, wenn es auf dem Bildschirm erscheint. Wenn Sie das Bild im Voraus laden möchten, können Sie die Schwellenwertoption auf 200 einstellen, damit das Bild im Voraus geladen wird 200 Pixel vom Bildschirm entfernt

Code kopieren Der Code lautet wie folgt:

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

Platzhalterbild

Sie können auch ein Platzhalterbild festlegen und Ereignisse definieren, um die Ladeaktion auszulösen. Zu diesem Zeitpunkt müssen Sie eine URL-Adresse für das Platzhalterbild festlegen, das bereits im Plug-in enthalten ist. in.

Ereignis hat das Laden ausgelöst

Das Ereignis kann ein beliebiges jQuery-Ereignis sein, z. B. „Click“ und „Mouseover“. Sie können auch benutzerdefinierte Ereignisse verwenden, z. B. „sporty“ und „foobar“. Standardmäßig befindet es sich im Wartezustand, bis der Benutzer zur Position scrollt Bild im Fenster. Um zu verhindern, dass das Platzhalterbild geladen wird, bis es angeklickt wird, können Sie Folgendes tun:

Code kopieren Der Code lautet wie folgt:

$("img").lazyload({

Platzhalter: „img/grey.gif“,

Ereignis: „Klick“

});

Verwenden Sie Spezialeffekte
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 Spezialeffekte verwenden, die Sie verarbeiten möchten ist die Effektdemonstrationsseite

Code kopieren Der Code lautet wie folgt:

$("img.lazy").lazyload({

Effekt: „fadeIn“
});

Das Bild befindet sich im Container

Sie können das Plug-in 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 eine horizontal scrollende Demoseite und eine vertikal scrollende Demoseite.

Code kopieren Der Code lautet wie folgt:

#container {

Höhe: 600px;

Überlauf: scrollen;

} 

$("img.lazy").lazyload({    

Container: $("#container")

});

Wenn die Bilder nicht in der richtigen Reihenfolge angeordnet sind

Beim Scrollen durch die Seite durchläuft Lazy Load eine Schleife und erkennt, ob sich das Bild im sichtbaren Bereich befindet. Standardmäßig stoppt die Schleife, wenn das erste Bild nicht im sichtbaren Bereich ist Das Bild wird als flüssig verteilt betrachtet, die Reihenfolge der Bilder auf der Seite stimmt jedoch nicht mit der Reihenfolge im HTML-Code überein die Failurelimit-Option

Code kopieren Der Code lautet wie folgt:

$("img.lazy").lazyload({ 

Fehlergrenze: 10

});

Setzen Sie die Fehlergrenze auf 10, damit das Plugin die Suche stoppt, nachdem es 10 Bilder gefunden hat, die nicht im sichtbaren Bereich sind. Wenn Sie ein umständliches Layout haben, setzen Sie diesen Parameter bitte höher.

Verzögertes Laden von Bildern

Eine unvollständige Funktion des Lazy Load-Plugins, die jedoch auch zum verzögerten Laden von Bildern verwendet werden kann. Der folgende Code implementiert das Laden der Bilder in der Seite Der angegebene Bereich wird automatisch geladen. Dies ist die Lazy-Loading-Demoseite.

Code kopieren Der Code lautet wie folgt:

$(function() {      

$("img:below-the-fold").lazyload({

        Ereignis: „sportlich“

});

});

$(window).bind("load", function() { 

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

});

Versteckte Bilder werden geladen

Auf Ihrer Seite sind möglicherweise viele versteckte Bilder verborgen. Wenn Sie beispielsweise das Plug-in zum Filtern der Liste verwenden, können Sie den Anzeigestatus jedes Elements in der Liste kontinuierlich ändern, um die Leistung zu verbessern Beim Laden werden ausgeblendete Bilder standardmäßig ignoriert. Wenn Sie ausgeblendete Bilder laden möchten, setzen Sie „skip_invisible“ bitte auf „false“

Code kopieren Der Code lautet wie folgt:

$("img.lazy").lazyload({ 

Skip_invisible: false

});

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

So implementieren Sie das Vorladen von Bildern und das verzögerte Laden mit Jquery_jquery