See meetod parandab veebilehe jõudlust, laadides pilte ainult siis, kui need on nähtaval või kasutaja ekraani lähedal.

Tänapäeva kiires digimaailmas on suure jõudlusega veebisaidi omamine hädavajalik. Selle üheks oluliseks aspektiks on piltide tõhusa laadimise tagamine. Kasutajad ootavad sujuvat ja kiiret sirvimiskogemust ning see artikkel näitab teile, kuidas seda saavutada.

Saate uurida piltide laisa laadimise kontseptsiooni ja õppida, kuidas seda HTML-i ja JavaScripti abil Intersection Observer API-ga rakendada.

Mis on laisk laadimine?

Laisk laadimine lükkab elementide, näiteks piltide laadimist edasi, kuni seda nõutakse. Selle asemel, et lehe laadimisel laadida kõiki pilte, laadib laisk laadimine ainult need pildid, mis on hetkel nähtavad või kasutaja vaateala läheduses. See veebisaidi jõudluse paranemine vähendab esialgset laadimisaega ja säästab ribalaiust.

Miks kasutada laiska laadimist?

Oma veebisaidil piltide aeglase laadimise kasutamiseks on mitu kaalukat põhjust, näiteks:

  • Kiirem esialgne lehe laadimine
    instagram viewer
    : Laisk laadimine takistab kõigi piltide korraga laadimist, vähendades lehe esialgset laadimisaega. Kasutajad saavad teie saidiga varem suhtlema hakata, mis toob kaasa parema kasutuskogemuse.
  • Täiustatud lehe reageerimisvõime: Kui laadite pilte kasutajate kerimise ajal, jääb veebisait tundlikuks ja sujuvaks, tagades sujuva kerimise ja navigeerimise, ilma et oleks vaja oodata kogu sisu laadimist.
  • Ribalaiuse kokkuhoid: Laisk laadimine säästab ribalaiust, muutes selle ideaalseks mobiilikasutajatele ja neile, kellel on aeglane Interneti-ühendus. See võib vähendada oma veebisaidi andmetarbimist, millest saavad kasu kasutajad.
  • SEO eelised: Otsingumootorid nagu Google kaaluge järjestustegurina lehe kiirust. Laisk laadimispurk mõjutab positiivselt teie saidi SEO toimivust laadimisaja parandamisega.

Nüüd, kui saate aru, miks laisk laadimine on kasulik, uurime, kuidas seda rakendada.

Laisa laadimise rakendamine: HTML-i märgistus

Alustamiseks peate muutma oma HTML-koodi, et see hõlmaks laadimine = "laisk" atribuut teie peal sildid.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

The laadimine atribuuti kasutatakse HTML-is veebilehe elementide laadimiskäitumise juhtimiseks. Kui määrate laadimine = "laisk" peal silt, käsib see brauseril ressursi laadimist edasi lükata, kuni seda vaja läheb.

Hetkel näeb leht välja selline:

Laisa laadimise rakendamine: JavaScripti rakendamine

Laisa laadimise järgmisele tasemele viimiseks kasutage Intersection Observer API-t. See API võimaldab teil jälgida, millal element vaateavasse siseneb või sealt välja läheb.

Ristmikuvaatleja kasutamine piltide laiskaks laadimiseks on lihtne: lehe laadimisel laadib see madalama kvaliteediga pildi.

Seejärel, kui see pilt vaateaknas nähtavaks muutub, vahetab JavaScript selle välja kvaliteetsema versiooni vastu. Selle elluviimiseks muutke oma HTML-i.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Siin on esmane pildiallikas madala kvaliteediga versioon ja kvaliteetne pilt on sekundaarne allikas. Seejärel näeb leht välja selline:

Järgmisena valige kõik pildid, mida soovite laisklaadida:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Pärast seda looge an IntersectionObserver objektiks.

const observer = new IntersectionObserver();

Seejärel sisestage kirjed (massiivi IntersectionObserverEntry objektid, mis esindavad vaadeldavaid elemente ja nende ristumiskohta vaateavaga) ja vaatlejat ( IntersectionObserver näide ise).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Järgmisena kontrollige ristmikke ja vahetage madala kvaliteediga pilt kvaliteetse pildi vastu alati, kui see element ristub.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Lõpuks alustage iga elemendi vaatlust.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Ja sellega olete rakendanud JavaScripti laisa laadimise.

Laisa laadimise kaalutlused

Laisa laadimise integreerimisel on oluline arvestada järgmiste aspektidega:

  • Juurdepääsetavus: juurdepääsetavuse tagamiseks esitage piltidele alternatiivne tekst koos alt atribuut. See teave on ekraanilugejate jaoks tugipunkt.
  • Brauseri ühilduvus: Enne laisa laadimise rakendamist kontrollige selle ühilduvust erinevate brauseritega. Kõik brauserid ei toeta seda funktsiooni. Teatud juhtudel võib polütäite lisamine osutuda hädavajalikuks, eriti vanemate brauserite puhul. Selline tööriist nagu Kas ma võin kasutada on väärtuslik ressurss brauseri ühilduvuse hindamiseks.
  • Testimine: Laisa laadimise juurutamise põhjalik testimine mitmesuguste seadmete ja ekraani mõõtmete lõikes on ülimalt oluline.

Veebisaidi kiiruse ja kasutajakogemuse parandamine

Kui lisate oma veebisaidile piltide laisa laadimise, saate oma saiti kiirendada ja kasutajakogemust parandada. Kiirem laadimisaeg ja sujuvam sirvimiskogemus on see, mida kasutajad soovivad ning see tehnika tagab sama.

Lisaks saate nautida paremat SEO-d ja säästa ribalaiuse kasutamist. Miks siis oodata? Alustage oma veebisaidi optimeerimist juba täna selle lihtsa, kuid võimsa meetodi abil.