JQuery-Einstellungen laden UL nicht

Bei der Webentwicklung sind Bilder und Videos unverzichtbare Elemente von Webseiten, aber manchmal ist die Ladegeschwindigkeit dieser Elemente aus Netzwerkgründen sehr langsam, was dazu führt, dass die Seite langsam geladen wird oder sogar direkt abstürzt. In manchen Fällen müssen wir möglicherweise nur einige Bilder und Videos anzeigen. Wie richtet man das ein? In diesem Artikel wird JQuery als Beispiel verwendet, um vorzustellen, wie man UL nicht lädt, um das Laden von Seiten zu beschleunigen.

1. Technischer Hintergrund

In der Front-End-Entwicklung ist JQuery eines der am häufigsten verwendeten JS-Frameworks. Es kann uns helfen, die Entwicklung von Webseiten schnell abzuschließen und die Entwicklungseffizienz zu verbessern. In jquery können wir Code schreiben, um die UL nicht zu laden und die Ladegeschwindigkeit der Seite zu verbessern.

2. Legen Sie die Methode fest, um ul nicht zu laden. In jquery können wir Javascript-Code schreiben, um zu verhindern, dass ul geladen wird Fügen Sie es der Klasse des Divs „lazyLoad“ hinzu, zum Beispiel:

1. Schreiben Sie den folgenden Code in jquery:

   $(window).on("load",function(){
     $(".lazyLoad").each(function(){
       var totalHeight = $(this).height();
       $(this).find("img").each(function(){
         totalHeight -= $(this).height();
         if(totalHeight > 0){
           $(this).attr("src",$(this).data("src"));
         }
       });
       $(this).addClass("loaded");
     });
   });

   <div class="lazyLoad">Im obigen Code verwenden wir zuerst $(window).on("load", function(){}), um das Window Load-Ereignis abzuhören und dann jedes Div zu durchlaufen, das den Klassennamen .lazyLoad enthält. Beim Durchlaufen jedes Div erhalten wir die Summe der Höhen aller Bilder und bestimmen dann, welchen Bildern das src-Attribut hinzugefügt wurde, indem wir beurteilen, ob totalHeight größer als 0 ist. Wenn totalHeight größer als 0 ist, fügen Sie das Bild zum src-Attribut hinzu, andernfalls wird das Bild nicht geladen. Schließlich fügen wir den Namen der geladenen Klasse zum div hinzu.

2. Fügen Sie den folgenden Code in CSS hinzu:

   .lazyLoad img{
     opacity:0;
     transition:opacity 500ms ease-in-out;
   }
   .lazyLoad.loaded img{
     opacity:1;
   }

   Im Code setzen wir die Deckkraft für .lazyLoad img auf 0 und fügen eine CSS-Animation hinzu. Nachdem .lazyLoad alle Bilder geladen hat, die geladen werden müssen, fügen wir ihnen den geladenen Klassennamen hinzu. Zu diesem Zeitpunkt wird die Deckkraft von .lazyLoad.img auf 1 geändert und alle Bilder mit dem src-Attribut werden angezeigt .

3. 3. Effektdemonstration

   Um besser zu verstehen, wie man UL einrichtet, ohne zu laden, hat dieser Artikel eine Effektdemonstration für alle vorbereitet. Auf der Demoseite gibt es 10 Bilder, aber nur 5 davon werden geladen und die anderen 5 werden nicht geladen. Beim Öffnen der Konsole können wir sehen, dass nur 5 Bildern das src-Attribut hinzugefügt wurde und die anderen 5 Bilder nicht geladen wurden.

4. Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit jquery festlegen, dass UL nicht geladen wird, um das Laden der Seite zu beschleunigen. Wir verwenden Javascript-Code, um das Div zu durchlaufen, das den Klassennamen .lazyLoad enthält, alle Bilder zu finden, die geladen werden müssen, festzustellen, ob das Bild geladen werden muss, indem wir die Differenz zwischen der Höhe des Bildes und der Gesamthöhe berechnen, und addieren der geladene Klassenname, um den Anzeigeeffekt zu vervollständigen.

Kurz gesagt, dies ist eine sehr praktische Optimierungstechnik und ich hoffe, dass sie für die Front-End-Entwicklungsarbeit aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonJQuery-Einstellungen laden UL nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!