Implementieren Sie JQuery Lazy Loading und kehren Sie zum Anfang zurück

In diesem Artikel erfahren Sie, wie Sie das verzögerte Laden von JQuery nach oben implementieren.

So ermitteln Sie, ob ein Element im sichtbaren Bereich des Fensters erscheint (zwischen dem oberen und unteren Rand des Browsers, mit bloßem Auge sichtbar). Schreiben Sie eine Funktion isVisible, um

function isVisible($node){    var winH = $(window).height(), 
        winS = $(window).scrollTop(),
        nodeHeight = $node.height(),
        nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){            return true;
        }else{            return false;
        }
}

beim Scrollen des Fensters zu implementieren, um zu bestimmen, ob ein Element im sichtbaren Bereich des Fensters erscheint. Gibt jedes Mal, wenn es auftritt, true an die Konsole aus. Verwenden Sie Code, um

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            console.log(true);
        }else{            console.log(false);
        }
    });
}

isVisible($node);

zu implementieren. Bestimmen Sie beim Scrollen des Fensters, ob ein Element im sichtbaren Bereich des Fensters angezeigt wird. Gibt true auf der Konsole aus, wenn das Element zum ersten Mal angezeigt wird, und es wird keine Verarbeitung durchgeführt, wenn es erneut angezeigt wird. Was ist das Prinzip des verzögerten Ladens von

function isVisible($node){
    $(window).on('scroll',function(){        var winH = $(window).height(), 
            winS = $(window).scrollTop(),
            nodeHeight = $node.height(),
            nodeTop = $node.offset().top;        if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){            if(!$node.attr("data-sc")){                console.log(true);
                $node.attr("data-sc",true); 
            }else{                return;
            }
        }else{            return;
        }
    });
}
isVisible($node);

-Bildern mithilfe von Code?

Wenn die Seite geladen wird, verweisen Sie mit der Bildadresse der Seite auf ein kleines, identisches weißes Bild und geben Sie die echte Bildadresse in das erstellte benutzerdefinierte Attribut ein, z. B.:

<img  src="/static/imghwm/default1.png"  data-src="small.png"  class="lazy"   data- alt="Implementieren Sie JQuery Lazy Loading und kehren Sie zum Anfang zurück" >

src ist die Miniaturbildadresse, data-src ist die tatsächliche Adresse.
Wenn das Bild im sichtbaren Bereich des Fensters angezeigt wird, ist die Zuweisung der tatsächlichen Bildadresse im benutzerdefinierten Attribut zu src das Implementierungsprinzip des verzögerten Ladens.

In diesem Artikel wird JQuery erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwandte Fragen dazu

JS-Arrays, Strings und mathematische Funktionen

Über JS-Zeitobjekte und Rekursionsprobleme

Das obige ist der detaillierte Inhalt vonImplementieren Sie JQuery Lazy Loading und kehren Sie zum Anfang zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!