Šis paņēmiens uzlabo tīmekļa lapas veiktspēju, ielādējot attēlus tikai tad, kad tie ir redzami vai lietotāja ekrāna tuvumā.

Mūsdienu straujajā digitālajā pasaulē augstas veiktspējas tīmekļa vietne ir būtiska. Viens no svarīgākajiem aspektiem ir nodrošināt, lai jūsu attēli tiktu ielādēti efektīvi. Lietotāji sagaida vienmērīgu un ātru pārlūkošanas pieredzi, un šajā rakstā tiks parādīts, kā to panākt.

Jūs izpētīsit slinkas attēlu ielādes koncepciju un uzzināsit, kā to ieviest, izmantojot HTML un JavaScript ar Intersection Observer API.

Kas ir slinka ielāde?

Slinka ielāde aizkavē elementu, piemēram, attēlu, ielādi, līdz tas tiek pieprasīts. Tā vietā, lai ielādētu visus attēlus, kad lapa tiek ielādēta, slinkā ielāde ielādē tikai tos attēlus, kas pašlaik ir redzami vai atrodas lietotāja skatīšanās apgabala tuvumā. Šis vietnes veiktspējas uzlabojums samazina sākotnējo ielādes laiku un ietaupa joslas platumu.

Kāpēc izmantot slinko ielādi?

Ir vairāki pārliecinoši iemesli, lai savā vietnē izmantotu slinku attēlu ielādi, piemēram:

instagram viewer
  • Ātrāka sākotnējā lapas ielāde: Slinka ielāde neļauj visiem attēliem ielādēt uzreiz, tādējādi samazinot sākotnējo lapas ielādes laiku. Lietotāji var ātrāk sākt mijiedarboties ar jūsu vietni, tādējādi nodrošinot labāku lietotāja pieredzi.
  • Uzlabota lapas atsaucība: ielādējot attēlus, lietotājiem ritinot, vietne paliek atsaucīga un plūstoša, nodrošinot vienmērīgu ritināšanu un navigāciju, negaidot, kamēr viss saturs tiks ielādēts.
  • Joslas platuma ietaupījumi: Slinka ielāde saglabā joslas platumu, padarot to ideāli piemērotu mobilo sakaru lietotājiem un tiem, kuriem ir lēns interneta savienojums. Šis var samazināt savas vietnes datu patēriņu, kas sniedz labumu lietotājiem.
  • SEO priekšrocības: Meklētājprogrammas, piemēram, Google apsveriet lapas ātrumu kā ranžēšanas faktoru. Slinka iekraušanas kanna pozitīvi ietekmēt jūsu vietnes SEO veiktspēju uzlabojot ielādes laiku.

Tagad, kad esat sapratis, kāpēc laiska ielāde ir izdevīga, izpētīsim, kā to ieviest.

Slinkas ielādes ieviešana: HTML marķējums

Lai sāktu, jums būs jāmaina savs HTML kods, lai iekļautu ielādēšana = "slinks" atribūts uz jūsu tagus.

<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 iekraušana Atribūts tiek izmantots HTML, lai kontrolētu elementu ielādi tīmekļa lapā. Kad iestatāt ielādēšana = "slinks" uz tagu, tas liek pārlūkprogrammai atlikt resursa ielādi, līdz tas ir nepieciešams.

Šobrīd lapa izskatās šādi:

Slinkas ielādes ieviešana: JavaScript ieviešana

Lai paceltu savu slinko ielādi uz nākamo līmeni, izmantojiet Intersection Observer API. Izmantojot šo API, varat skatīties, kad kāds elements nonāk skata logā vai iziet no tā.

Krustojuma novērotāja izmantošanas iemesls slinkai attēlu ielādei ir vienkāršs: kad lapa tiek ielādēta, tā iegūst zemākas kvalitātes attēlu.

Kad šis attēls kļūst redzams skatvietā, JavaScript to nomaina pret augstākas kvalitātes versiju. Lai to īstenotu, mainiet savu 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>

Šeit primārais attēla avots ir zemas kvalitātes versija, bet augstas kvalitātes attēls ir sekundārais avots. Tad lapa izskatās šādi:

Pēc tam atlasiet visus attēlus, kurus vēlaties slinki ielādēt:

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

Pēc tam izveidojiet an IntersectionObserver objektu.

const observer = new IntersectionObserver();

Pēc tam ievadiet ierakstus (masīvs no IntersectionObserverEntry objekti, kas attēlo novērojamos elementus un to krustojumu ar skata logu) un novērotāju ( IntersectionObserver pats gadījums).

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

Pēc tam pārbaudiet krustojumus un nomainiet zemas kvalitātes attēlu pret augstas kvalitātes attēlu ikreiz, kad šis elements krustojas.

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

Visbeidzot inicializējiet katra elementa novērošanu.

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

Līdz ar to jūs esat ieviesis slinku ielādi, izmantojot JavaScript.

Slinkas ielādes apsvērumi

Integrējot slinko ielādi, ir svarīgi ņemt vērā šādus aspektus:

  • Pieejamība: lai nodrošinātu pieejamību, nodrošiniet alternatīvu tekstu attēliem ar alt atribūts. Šī informācija kalpo kā ekrāna lasītāju paļaušanās punkts.
  • Pārlūka saderība: Pirms slinkās ielādes ieviešanas apstipriniet tās saderību ar dažādām pārlūkprogrammām. Ne visas pārlūkprogrammas paplašina šīs funkcijas atbalstu. Dažos gadījumos polifills var būt obligāti jāiekļauj, īpaši vecākām pārlūkprogrammām. Tāds rīks kā Var izmantot ir vērtīgs resurss pārlūkprogrammu saderības novērtēšanai.
  • Testēšana: ļoti svarīga ir slinkas ielādes ieviešanas visaptveroša testēšana dažādu ierīču un ekrāna izmēru diapazonā.

Vietnes ātruma un lietotāju pieredzes uzlabošana

Ja savā vietnē iekļaujat attēlu slinku ielādi, varat paātrināt vietnes darbību un uzlabot lietotāja pieredzi. Lietotāji vēlas ātrāku ielādes laiku un vienmērīgāku pārlūkošanas pieredzi, un šī tehnika nodrošina to pašu.

Turklāt jūs izbaudīsiet labāku SEO un ietaupīsiet joslas platuma izmantošanu. Tātad, kāpēc gaidīt? Sāciet optimizēt savu vietni jau šodien, izmantojot šo vienkāršo, bet jaudīgo metodi.