Ez a technika javítja a weboldal teljesítményét azáltal, hogy csak akkor tölti be a képeket, ha azok láthatóak vagy a felhasználó képernyőjének közelében vannak.

A mai rohanó digitális világban elengedhetetlen egy nagy teljesítményű weboldal. Ennek egyik kritikus szempontja a képek hatékony betöltésének biztosítása. A felhasználók zökkenőmentes és gyors böngészést várnak el, és ez a cikk megmutatja, hogyan érheti el ezt.

Felfedezi a képek lusta betöltésének fogalmát, és megtanulja, hogyan valósítsa meg azt HTML és JavaScript használatával az Intersection Observer API-val.

Mi az a lusta betöltés?

A késleltetett betöltés késlelteti az elemek, például a képek betöltését, amíg nem szükséges. Ahelyett, hogy az oldal betöltésekor az összes képet betöltené, a lusta betöltés csak azokat a képeket tölti be, amelyek jelenleg láthatók vagy a felhasználó látómezőjének közelében vannak. A webhely teljesítményének ezen javulása csökkenti a kezdeti betöltési időt és sávszélességet takarít meg.

Miért használjunk lusta betöltést?

instagram viewer

Számos nyomós oka van a képek lusta betöltésének a webhelyén, például:

  • Gyorsabb kezdeti oldalbetöltés: A késleltetett betöltés megakadályozza az összes kép egyidejű betöltését, csökkentve az oldal kezdeti betöltési idejét. A felhasználók hamarabb elkezdhetik az Ön webhelyével való interakciót, ami jobb felhasználói élményt eredményez.
  • Jobb oldalérzékenység: Ha a felhasználók görgetés közben töltik be a képeket, a webhely reszponzív és gördülékeny marad, biztosítva a gördülékeny görgetést és navigációt anélkül, hogy meg kellene várnia az összes tartalom betöltésére.
  • Sávszélesség-megtakarítás: A lusta betöltés sávszélességet takarít meg, így ideális mobilfelhasználók és lassú internetkapcsolattal rendelkezők számára. Ez lehet csökkenti a webhely adatfogyasztását, ami a felhasználók javát szolgálja.
  • SEO előnyei: Keresőmotorok, mint a Google tekintse az oldalsebességet rangsorolási tényezőnek. Lusta rakodódoboz pozitívan befolyásolja webhelye SEO teljesítményét a betöltési idő javításával.

Most, hogy megértette, miért előnyös a lusta betöltés, nézzük meg, hogyan valósíthatja meg.

Lusta betöltés megvalósítása: A HTML-jelölés

A kezdéshez módosítania kell a HTML-kódot, hogy tartalmazza a loading="lusta" attribútum a te címkéket.

<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>

A Betöltés Az attribútum a HTML-ben a weboldalon lévő elemek betöltési viselkedésének szabályozására szolgál. Amikor beállítod loading="lusta" rajta címke, azt utasítja a böngészőnek, hogy halassza el az erőforrás betöltését, amíg szükség lesz rá.

Jelenleg így néz ki az oldal:

Lusta betöltés megvalósítása: A JavaScript implementáció

A lusta betöltés új szintre emeléséhez használja az Intersection Observer API-t. Ezzel az API-val megtekintheti, hogy egy elem mikor érkezik a nézetablakba, vagy mikor lép ki onnan.

Az Intersection Observer alkalmazásának oka a képek lusta betöltéséhez egyszerű: amikor az oldal betöltődik, gyengébb minőségű képet tölt le.

Ezután, amint ez a kép láthatóvá válik a nézetablakban, a JavaScript kicseréli a jobb minőségű verzióra. Ennek gyakorlati megvalósításához módosítsa a HTML-kódját.



 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>

Itt az elsődleges képforrás a gyenge minőségű verzió, a jó minőségű kép pedig a másodlagos forrás. Az oldal akkor így néz ki:

Ezután válassza ki az összes betölteni kívánt képet:

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

Ezt követően hozzon létre egy IntersectionObserver tárgy.

const observer = new IntersectionObserver();

Ezután adja meg a bejegyzéseket (egy tömb IntersectionObserverEntry objektumok, amelyek a megfigyelt elemeket és azok metszéspontját a nézetablakkal reprezentálják, valamint a megfigyelőt (a IntersectionObserver maga a példa).

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

Ezután ellenőrizze a kereszteződéseket, és cserélje ki az alacsony minőségű képet a jó minőségűre, amikor az elem metszi.

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

Végül inicializálja a megfigyelést minden elemnél.

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

És ezzel megvalósította a lusta betöltést JavaScripttel.

Lusta betöltési szempontok

A lusta betöltés integrálásakor elengedhetetlen a következő szempontok figyelembe vétele:

  • Megközelíthetőség: A hozzáférhetőség biztosítása érdekében adjon meg alternatív szöveget a képekhez alt tulajdonság. Ez az információ megbízhatósági pontként szolgál a képernyőolvasók számára.
  • Böngésző kompatibilitás: A lusta betöltés végrehajtása előtt ellenőrizze a kompatibilitást a különböző böngészőkkel. Nem minden böngésző támogatja ezt a funkciót. Bizonyos esetekben a többkitöltés alkalmazása elengedhetetlenné válhat, különösen régebbi böngészők esetén. Olyan eszköz, mint Használhatom értékes forrás a böngésző kompatibilitás értékeléséhez.
  • Tesztelés: A lusta betöltés megvalósításának átfogó tesztelése az eszközök és a képernyőméretek széles körében rendkívül fontos.

A webhely sebességének és felhasználói élményének javítása

Ha webhelye képeinek lusta betöltését építi be, felgyorsíthatja webhelyét és javíthatja a felhasználói élményt. A felhasználók gyorsabb betöltési időt és gördülékenyebb böngészési élményt szeretnének, és ez a technika ugyanezt biztosítja.

Ezen felül élvezheti a jobb SEO-t, és megtakaríthatja a sávszélesség-használatot. Szóval minek várni? Kezdje el webhelye optimalizálását még ma ezzel az egyszerű, mégis hatékony módszerrel.