Zusammenfassung der drei Lazy-Load-Methoden lazyLoad mit nativem JS

<Stil>
    * {
      Polsterung: 0%;
      Marge: 0%;
    }

    .contain img {
      Breite: 600px;
      Höhe: 400px;
    }

    ul {
      Listenstil: keiner;
    }

    li {
      Anzeige: Inline-Block;
    }
  </Stil>
  
  
  <div Klasse="enthalten">
    <ul>
       <li><img data-src="./images/iu.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu1.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu2.png" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu3.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu4.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu5.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu6.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu7.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu8.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu9.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/iu10.jpg" src='./images/lazy.png' alt=""></li>
      <li><img data-src="./images/zzf_01.jpg" src='./images/lazy.png' alt=""></li>
    </ul>
  </div
>

/**
 * Methode 1 * Höhenkontrast */
 let imgs = [...document.querySelectorAll('img')]; // Zuerst alle Bilder abrufen window.addEventListener('scroll', function () {
   
 })

 /**
  * Methode 1 * Höhenkontrast */
  let imgs = [...document.querySelectorAll('img')]; // Zuerst alle Bilder abrufen window.addEventListener('scroll', function () {
    lazyLoad(Bilder)
  })
  Funktion lazyLoad(Bilder) {
    für (var i = 0; i < imgs.length; i++) {
      var height = imgs[i].offsetTop; // Die Höhe des Bildes vom oberen Rand aus var wheight = window.innerHeight; // Die Höhe des sichtbaren Bereichs des Browsers var sheight = document.documentElement.scrollTop; // Die Höhe der weggescrollten Seite if (height - sheight <= wheight) { // Bestimmen Sie, ob das Bild gleich erscheint imgs[i].src = imgs[i].dataset.src; // Konvertieren Sie die benutzerdefinierte Adresse in die echte Adresse, nachdem sie erscheint}
    }
  }

 /**
  * Methode 2 * @params getBoundingClientRect()
  * Ansichtsfenster-API
  */

 : Lassen Sie imgs = [...document.querySelectorAll('img')];
 window.addEventListener('scrollen', Funktion () {
    imgs.forEach(img => { 
      //Dies ist eigentlich die gleiche Idee wie Methode 1, aber es ist etwas einfacher if (img.getBoundingClientRect().top < window.innerHeight) { 
     
        let dataSrc = img.getAttribute(' data-src'); // Echte Adresse von data-src abrufen img.setAttribute('src', dataSrc); // Echte Adresse durch das src-Attribut ersetzen console.log(img.src);
      }
    })
  })

window.addEventListener('scrollen', Funktion () {
// Zuerst instanziieren wir diesen Konstruktor const observe = new IntersectionObserver(callback);
// Dann schreiben Sie die Callback-Funktion callback wir brauchen, um das Geschäft zu behandeln
   const callback = Einträge => {
        console.log(Einträge); //Drucken wir zuerst die Einträge aus, um zu sehen, wofür sie nützlich sind //Wie unten gezeigt};
}

window.addEventListener('scrollen', Funktion () {
   const observe = neuer IntersectionObserver(Rückruf);
// Dann schreiben Sie die Callback-Funktion callback wir brauchen, um das Geschäft zu behandeln
   const callback = Einträge => {
       // Wir stellen fest, dass es ein Array ist, also entries.forEach(ele => {
           console.log(ele); // Lassen Sie uns das Element noch einmal drucken, um zu sehen, was darin ist // wie unten gezeigt})
    };
}

 /**
  * Methode 3 * @params neuer IntersectionObserver(callback[,Optionen])
  * Beobachtung-->Konstruktor*/
  window.addEventListener('scrollen', Funktion () {
    let imgs = [...document.querySelectorAll('.img')]
    const callback = entries => { // entries ist das beobachtete Element-Array entries.forEach(ele => {
            if (ele.isIntersecting) { // isIntersecting wird beobachtet const data_src = ele.target.getAttribute('data-src'); // Dies ist grundsätzlich dasselbe wie Methode1/Methode2 ele.target.setAttribute('src', data_src); // ele.target ist das Zielelement observe.unobserve(ele.target) // Beobachtung aufheben, nachdem die echte Adresse ersetzt wurde }
        })
    };
    const observe = neuer IntersectionObserver(callback); // IntersectionObserver instanziieren
    imgs.forEach(Bild => { 
        observe.observe(image) // observe: Die aufgerufene IntersectionObserver-Instanz. Fügen Sie jedem Bild Beobachtungsinstanzen hinzu})
  }