Wie implementiert man das verzögerte Laden von Bildern?

Methode zum Implementieren des verzögerten Ladens: Passen Sie zunächst Attribute wie [data-imgurl] an, um den Pfad des Bildes zu speichern. Verwenden Sie dann js, um die Bildlaufposition der Schnittstelle zu bestimmen oder festzustellen, ob das Bild endgültig geladen wurde Der Wert des Attributs [data-imgurl] kann src zugewiesen werden, um ihn zu laden und abzurufen.

So implementieren Sie Lazy Loading von Bildern:

Passen Sie zunächst Attribute wie [data-imgurl] an, die speichert den Pfad des Bildes; ermittelt dann mit js die Bildlaufposition der Schnittstelle oder ob das Bild geladen wurde, ruft den Wert des Attributs [data-imgurl] ab und weist ihn src zu.

Um Bilder zu laden, ist die spezifische Methode wie folgt:

$('img').each(function () {//在未触发滚动事件时先判断图片是否已经出现在视窗中，打开页面时先遍历一次
if (checkShow($(this)) && !isLoaded($(this)) ){ loadImg($(this));//加载当前img  } })
$(window).on('scroll',function () {//滚动的触发事件
        $('img').each(function () {//遍历img标签
            if (checkShow($(this)) && !isLoaded($(this)) ){
                loadImg($(this));//加载当前img
            }
        })
    })
function checkShow($img) {}；// 定义checkShow函数判断当前img是否已经出现在了视野中，传入img对象
function isLoaded ($img) {}；//定义isLoaded函数判断当前img是否已经被加载过了
function loadImg ($img) {}；//定义loadImg函数加载图片

1 Bestimmen Sie, ob die Zielbezeichnung im Sichtfeld erscheint:

function checkShow($img) { // 传入img对象
        var sTop = $(window).scrollTop();  //即页面向上滚动的距离
        var wHeight = $(window).height(); // 浏览器自身的高度
        var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
        if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
            return true;
        }
        return false;
    }

2 . Stellen Sie fest, ob das Ziel-Tag geladen wurde:

function isLoaded ($img) {
       return $img.attr('data-imgurl') === $img.attr('src'); //如果data-imgurl和src相等那么就是已经加载过了
   }

3. Laden Sie das Ziel-Tag:

function loadImg ($img) {
      $img.attr('src',$img.attr('data-imgurl')); // 把自定义属性中存放的真实的src地址赋给src属性
  }

Verwandtes Lernen Empfehlungen: Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie implementiert man das verzögerte Laden von Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!