Ši technika pagerina tinklalapio našumą įkeldama vaizdus tik tada, kai jie matomi arba yra šalia vartotojo ekrano.

Šiandieniniame sparčiai besivystančiame skaitmeniniame pasaulyje labai svarbu turėti našią svetainę. Vienas iš svarbiausių aspektų yra užtikrinti, kad jūsų vaizdai būtų įkeliami efektyviai. Vartotojai tikisi sklandaus ir greito naršymo, o šiame straipsnyje bus parodyta, kaip tai pasiekti.

Išnagrinėsite tingaus vaizdų įkėlimo koncepciją ir sužinosite, kaip ją įdiegti naudojant HTML ir JavaScript su Intersection Observer API.

Kas yra tingus įkėlimas?

Tingus įkėlimas atitolina elementų, pvz., vaizdų, įkėlimą, kol to prireiks. Užuot įkeliant visus vaizdus, ​​kai įkeliamas puslapis, tingus įkėlimas įkelia tik tuos vaizdus, ​​​​kurie šiuo metu matomi arba yra šalia vartotojo peržiūros srities. Šis svetainės našumo pagerėjimas sumažina pradinį įkėlimo laiką ir taupo pralaidumą.

Kodėl verta naudoti „Lazy Loading“?

Yra keletas įtikinamų priežasčių, kodėl svetainėje reikia naudoti tingų vaizdų įkėlimą, pavyzdžiui:

instagram viewer
  • Greitesnis pradinis puslapio įkėlimas: tingus įkėlimas neleidžia visiems vaizdams įkelti iš karto, todėl sutrumpėja pradinis puslapio įkėlimo laikas. Naudotojai gali pradėti bendrauti su jūsų svetaine anksčiau, todėl naudotojams bus teikiama geresnė patirtis.
  • Pagerintas puslapio reagavimas: Įkeliant vaizdus, ​​kai naudotojai slenka, svetainė išlieka jautri ir sklandi, todėl užtikrinamas sklandus slinkimas ir naršymas, nereikia laukti, kol bus įkeltas visas turinys.
  • Pralaidumo taupymas: lėtas įkėlimas taupo pralaidumą, todėl idealiai tinka mobiliojo ryšio vartotojams ir tiems, kurie naudojasi lėtu interneto ryšiu. Tai gali sumažinti savo svetainės duomenų suvartojimą, naudingi vartotojams.
  • SEO privalumai: Paieškos sistemos, tokios kaip Google apsvarstykite puslapio greitį kaip reitingavimo veiksnį. Tinginio pakrovimo skardinė teigiamai paveikti jūsų svetainės SEO našumą gerinant įkrovimo laiką.

Dabar, kai supratote, kodėl tingus įkėlimas yra naudingas, panagrinėkime, kaip tai įgyvendinti.

„Lazy Loading“ įgyvendinimas: HTML žymėjimas

Norėdami pradėti, turėsite pakeisti HTML kodą, kad įtrauktumėte pakrovimas = "tinginys" atributas ant jūsų žymės.

<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 pakrovimas atributas naudojamas HTML, norint valdyti elementų įkėlimą tinklalapyje. Kai nustatote pakrovimas = "tinginys" ant žymą, ji nurodo naršyklei atidėti išteklių įkėlimą, kol jo prireiks.

Šiuo metu puslapis atrodo taip:

„Lazy Loading“ diegimas: „JavaScript“ diegimas

Norėdami perkelti savo tingų įkėlimą į kitą lygį, naudokite Intersection Observer API. Ši API leidžia stebėti, kada elementas patenka į peržiūros sritį arba išeina iš jos.

Priežastis, kodėl naudojama sankryžos stebėtojas tingiai įkelti vaizdus, ​​yra paprastas: kai puslapis įkeliamas, jis gauna prastesnės kokybės vaizdą.

Tada, kai šis vaizdas tampa matomas peržiūros srityje, „JavaScript“ pakeičia jį aukštesnės kokybės versija. Norėdami tai pritaikyti praktiškai, pakeiskite savo HTML.



 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>

Čia pagrindinis vaizdo šaltinis yra žemos kokybės versija, o aukštos kokybės vaizdas yra antrinis šaltinis. Tada puslapis atrodo taip:

Tada pasirinkite visus vaizdus, ​​kuriuos norite tingiai įkelti:

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

Po to sukurkite an IntersectionObserver objektas.

const observer = new IntersectionObserver();

Tada pateikite įrašus (masyvas IntersectionObserverEntry objektai, vaizduojantys stebimus elementus ir jų susikirtimą su peržiūros zona) ir stebėtoją ( IntersectionObserver pats pavyzdys).

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

Tada patikrinkite, ar nėra sankryžų, ir pakeiskite žemos kokybės vaizdą aukštos kokybės vaizdu, kai šis elementas susikerta.

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
 }
 });
});

Galiausiai inicijuokite kiekvieno elemento stebėjimą.

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

Be to, įdiegėte tingų įkėlimą naudodami „JavaScript“.

Tingaus įkrovimo svarstymai

Integruojant tingų krovimą, labai svarbu atsižvelgti į šiuos aspektus:

  • Prieinamumas: norėdami užtikrinti pasiekiamumą, pateikite alternatyvų tekstą vaizdams su alt atributas. Ši informacija yra ekrano skaitytuvų patikimumo taškas.
  • Naršyklės suderinamumas: Prieš įdiegdami tingų įkėlimą, patvirtinkite jo suderinamumą su skirtingomis naršyklėmis. Ne visos naršyklės palaiko šios funkcijos palaikymą. Tam tikrais atvejais polifill įtraukimas gali tapti būtinas, ypač senesnėse naršyklėse. Toks įrankis kaip Ar galiu naudoti yra vertingas šaltinis naršyklės suderinamumui įvertinti.
  • Testavimas: Išsamus tingaus įkėlimo diegimo bandymas įvairiuose įrenginiuose ir ekrano matmenyse yra itin svarbus.

Svetainės spartos ir naudotojo patirties gerinimas

Kai įtraukiate tingų vaizdų įkėlimą į savo svetainę, galite pagreitinti svetainę ir pagerinti naudotojo patirtį. Greitesnis įkėlimo laikas ir sklandesnis naršymas yra tai, ko nori vartotojai, ir ši technika užtikrina tą patį.

Be to, mėgausitės geresniu SEO ir sutaupysite pralaidumo. Taigi, kodėl laukti? Pradėkite optimizuoti savo svetainę šiandien naudodami šį paprastą, bet galingą metodą.