Heim > Artikel > Web-Frontend > Beschreiben Sie ausführlich, wie jQuery Lazy Loading implementiert
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.
-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.
function isShow($el){ var winH = $(window).height(),//获取窗口高度 scrollH = $(window).scrollTop(),//获取窗口滚动高度 top = $el.offset().top;//获取元素距离窗口顶部偏移高度 if(top < scrollH + winH){ return true;//在可视范围 }else{ return false;//不在可视范围 } }
$(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); }
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!