Was bedeutet verzögertes Laden von Bildern? So implementieren Sie das verzögerte Laden von Bildern

Der Inhalt dieses Artikels befasst sich mit der Frage, was das verzögerte Laden von Bildern bedeutet. Die Implementierungsmethode des verzögerten Ladens von Bildern hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Das sogenannte Lazy Loading ist ein Mittel, um die Öffnungsgeschwindigkeit von Webseiten zu verbessern und ein besseres Benutzererlebnis zu erzielen. Die wichtigen Teile der Auswahl werden zuerst geladen und die weniger wichtigen Teile werden bei Bedarf geladen. Auf einer E-Commerce-Website beispielsweise enthält der erste Bildschirm normalerweise viele Daten, ein Banner oder Karussell mit hoher Auflösung. Im Nicht-First-Screen-Teil der Seite sind viele Mitgliederprodukte mit einer großen Anzahl von Bildern gemischt. In diesem Fall ist es sehr wichtig, Lazy Loading zu wählen, um die Glätte des ersten Bildschirms sicherzustellen.

Dieser Artikel ist nur ein einfaches Beispiel für das verzögerte Laden von Bildern. Es handelt sich um ein Einführungskapitel zur Leistungsoptimierung. Die Methode ist relativ einfach und klar verstehe es.

Kein Unsinn mehr

<img  alt="Was bedeutet verzögertes Laden von Bildern? So implementieren Sie das verzögerte Laden von Bildern" >

Zunächst werden die Attribute class="img-delay" und src zu Bildern hinzugefügt, die sich nicht auf dem ersten Bildschirm befinden. Letzteres wird zum Platzieren des Attributs verwendet der ursprünglichen URL-Adresse des Bildes selbst können Sie es leer lassen oder ein Erinnerungsbild hinzufügen, dass „das Bild nicht angezeigt werden kann“, wie Tmall:

Was wir danach tun müssen, ist, das Bild überall dort anzuzeigen, wo der Benutzer gleitet (es ist besser, es etwas im Voraus anzuzeigen, wir werden es hier nicht im Voraus tun). )

//首先你需要引入一个 jQuery 库

//获取需要延迟加载的图片
var $picDelay = $(".img-delay");

//在 window 上监听滑动事件
$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();    //滑块划过的距离
  var screenHeight = screen.height;     //屏幕浏览器内容部分的高度

  //计算每个图片的位置是否符合要求
  $picDelay.each(function(idx, ele){
    var $ele = $(ele);
    //当scrollTop + screenHeight === ele.offsetTop时图片刚好出现上边沿
    if(scrollTop + screenHeight >= ele.offsetTop){
      $ele.attr("src", $ele.attr("src")).removeAttr('src').removeClass("img-delay");
    }
  });

  //当所有图片都加载了以后，移除这个事件
  if($(".img-delay").length <p>Verwandte Empfehlungen: </p><p><a href="//m.sbmmt.com/js-tutorial-388508.html" target="_self">Details zum verzögerten Laden und Vorladen von Bildern</a><br></p><p><a href="//m.sbmmt.com/php-weizijiaocheng-337244.html" target="_self">PHP Curl erfasst das verzögert ladende Bild Methode, bitte geben Sie mir einen Rat</a></p><p class="comments-box-content"></p>

Das obige ist der detaillierte Inhalt vonWas bedeutet verzögertes Laden von Bildern? So implementieren Sie das verzögerte Laden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!