Beschreiben Sie ausführlich, wie jQuery Lazy Loading implementiert

1. Warum ist Lazy Loading erforderlich?

• Für Nutzungsszenarien, in denen zu viele Bilder vorhanden sind, laden wir keine Bilder, die nicht innerhalb der Seitenladegeschwindigkeit liegen und das Benutzererlebnis verbessern Warten Sie, bis es im Sichtfeld erscheint, bevor Sie es laden.

2. Das Implementierungsprinzip des verzögerten Ladens

-Das Implementierungsprinzip ist sehr einfach. Zeigen Sie zunächst auf ein kleines Bild und die tatsächliche Adresse des Bildes wird in img gespeichert. Warten Sie in einem benutzerdefinierten -Attribut , , bis das Bild im Sichtfeld erscheint. Holen Sie sich das img-Element und ändern Sie src. Der Wert in wird src zugewiesen.

3. Wissenspunkte, die zum Implementieren von Lazy Loading erforderlich sind

(1) Ermitteln Sie das Fenster, den Fensterlauf und die Versatzhöhe des Elements vom oberen Rand des Fensters und berechnen Sie, ob das Element darin angezeigt wird der sichtbare Bereich des Fensters ;

Paste_Image.png

    function isShow($el){
      var winH = $(window).height(),//获取窗口高度
            scrollH = $(window).scrollTop(),//获取窗口滚动高度
            top = $el.offset().top;//获取元素距离窗口顶部偏移高度
      if(top < scrollH + winH){
          return true;//在可视范围
        }else{
          return false;//不在可视范围
        }
      }

(2) Hören Sie sich das Scrollen des Fensters Ereignis und prüfen Sie, ob das Element im Ansichtsbereich verfügbar ist

    $(window).on('scroll', function(){//监听滚动事件
        checkShow();
    })
    checkShow();
    function checkShow(){//检查元素是否在可视范围内
        $('img').each(function(){//遍历每一个元素
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//判断是否已加载
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//设置时间是为了更好的看出效果
            };
        });
    }

(3) Wenn das Element angezeigt wird, ersetzen Sie das vorherige Standardfoto durch das Foto in src.

    function showImg($el){
        $el.attr('src', $el.attr('src'));
        $cur.data('isloaded',true);
    }

Paste_Image.png

Paste_Image.png

Das obige ist der detaillierte Inhalt vonBeschreiben Sie ausführlich, wie jQuery Lazy Loading implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!