Ta tehnika izboljša delovanje spletne strani z nalaganjem slik le, ko so vidne ali blizu uporabnikovega zaslona.

V današnjem hitrem digitalnem svetu je zelo zmogljivo spletno mesto nujno. Eden ključnih vidikov tega je zagotavljanje učinkovitega nalaganja slik. Uporabniki pričakujejo gladko in hitro izkušnjo brskanja in ta članek vam bo pokazal, kako to doseči.

Raziskali boste koncept lenega nalaganja slik in se naučili, kako ga implementirati z uporabo HTML in JavaScript z API-jem Intersection Observer.

Kaj je leno nalaganje?

Leno nalaganje zadrži nalaganje elementov, kot so slike, dokler ni potrebno. Namesto nalaganja vseh slik, ko se stran naloži, leno nalaganje naloži samo slike, ki so trenutno vidne ali blizu območja za ogled uporabnika. To izboljšanje delovanja spletnega mesta skrajša začetni čas nalaganja in prihrani pasovno širino.

Zakaj uporabljati leno nalaganje?

Obstaja več prepričljivih razlogov za uporabo lenobnega nalaganja slik na vašem spletnem mestu, kot so:

  • Hitrejše začetno nalaganje strani
    instagram viewer
    : Leno nalaganje prepreči nalaganje vseh slik hkrati, kar skrajša začetni čas nalaganja strani. Uporabniki lahko prej začnejo komunicirati z vašim spletnim mestom, kar vodi do boljše uporabniške izkušnje.
  • Izboljšana odzivnost strani: Z nalaganjem slik, ko se uporabniki pomikajo, spletno mesto ostane odzivno in tekoče, kar zagotavlja gladko pomikanje in navigacijo, ne da bi bilo treba čakati, da se naloži vsa vsebina.
  • Prihranek pasovne širine: Leno nalaganje ohranja pasovno širino, zaradi česar je idealno za mobilne uporabnike in tiste s počasnimi internetnimi povezavami. To lahko zmanjšajte porabo podatkov vašega spletnega mesta, kar koristi uporabnikom.
  • SEO prednosti: Iskalniki, kot je Google upoštevajte hitrost strani kot dejavnik razvrščanja. Leno nalaganje lahko pozitivno vpliva na uspešnost SEO vašega spletnega mesta z izboljšanjem časa nalaganja.

Zdaj, ko razumete, zakaj je odloženo nalaganje koristno, poglejmo, kako ga implementirati.

Implementacija lenega nalaganja: oznaka HTML

Če želite začeti, boste morali spremeniti kodo HTML, da bo vključevala nalaganje="len" atribut na vašem oznake.

<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 nalaganje atribut se uporablja v HTML za nadzor nalaganja elementov na spletni strani. Ko nastavite nalaganje="len" na a pove brskalniku, naj odloži nalaganje vira, dokler ni potreben.

Trenutno stran izgleda takole:

Implementacija lenega nalaganja: implementacija JavaScripta

Če želite svoje leno nalaganje dvigniti na višjo raven, uporabite API Intersection Observer. Ta API vam omogoča opazovanje, kdaj element pride v vidno polje ali izstopi iz njega.

Utemeljitev za uporabo Intersection Observerja za leno nalaganje slik je preprosta: ko se stran naloži, pridobi sliko nižje kakovosti.

Potem, ko ta slika postane vidna v vidnem polju, jo JavaScript zamenja za različico višje kakovosti. Če želite to uporabiti v praksi, spremenite svoj 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>

Tu je primarni vir slike nizkokakovostna različica, visokokakovostna slika pa sekundarni vir. Stran je potem videti takole:

Nato izberite vse slike, ki jih želite leno naložiti:

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

Po tem ustvarite IntersectionObserver predmet.

const observer = new IntersectionObserver();

Nato posredujte vnose (niz IntersectionObserverEntry predmeti, ki predstavljajo opazovane elemente in njihovo presečišče z vidnim poljem) in opazovalca ( IntersectionObserver sam primer).

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

Nato preverite presečišča in zamenjajte nizkokakovostno sliko z visokokakovostno, kadar koli se ta element seka.

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

Končno inicializirajte opazovanje za vsak element.

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

In s tem ste implementirali leno nalaganje z JavaScriptom.

Premisleki glede lenega nalaganja

Pri integraciji lenobnega nalaganja postane nujno upoštevati naslednje vidike:

  • Dostopnost: Za zagotovitev dostopnosti zagotovite alternativno besedilo za slike z alt atribut. Te informacije služijo kot točka zanašanja za bralnike zaslona.
  • Združljivost brskalnika: Pred implementacijo lenega nalaganja preverite njegovo združljivost z različnimi brskalniki. Vsi brskalniki ne razširijo podpore za to funkcijo. V nekaterih primerih lahko vključitev polifilla postane nujna, zlasti za starejše brskalnike. Orodje kot CanIUse je dragocen vir za ocenjevanje združljivosti brskalnika.
  • Testiranje: Izjemnega pomena je obsežno testiranje implementacije lenega nalaganja v širokem spektru naprav in dimenzij zaslona.

Izboljšanje hitrosti spletnega mesta in uporabniške izkušnje

Ko na svoje spletno mesto vključite leno nalaganje slik, lahko pospešite svoje spletno mesto in izboljšate uporabniško izkušnjo. Uporabniki si želijo hitrejši čas nalaganja in bolj gladke izkušnje brskanja, ta tehnika pa zagotavlja enako.

Poleg tega boste uživali v boljšem SEO in prihranili pri uporabi pasovne širine. Torej, zakaj čakati? Začnite optimizirati svoje spletno mesto še danes s to preprosto, a zmogljivo metodo.