Тази техника подобрява производителността на уеб страницата, като зарежда изображения само когато са видими или близо до екрана на потребителя.

В днешния забързан дигитален свят наличието на високоефективен уебсайт е от съществено значение. Един критичен аспект от това е да гарантирате, че вашите изображения се зареждат ефективно. Потребителите очакват гладко и бързо сърфиране и тази статия ще ви покаже как да постигнете това.

Ще проучите концепцията за отложено зареждане на изображения и ще научите как да я внедрите с помощта на HTML и JavaScript с API на Intersection Observer.

Какво е мързеливо зареждане?

Мързеливото зареждане забавя зареждането на елементи, като изображения, докато не е необходимо. Вместо да зарежда всички изображения, когато страницата се зареди, мързеливото зареждане зарежда само изображенията, които са видими в момента или близо до зоната за гледане на потребителя. Това подобрение в ефективността на уебсайта намалява първоначалното време за зареждане и запазва честотната лента.

instagram viewer

Защо да използвате мързеливо зареждане?

Има няколко убедителни причини да използвате отложено зареждане на изображения на уебсайта си, като например:

  • По-бързо първоначално зареждане на страницата: Мързеливото зареждане предотвратява зареждането на всички изображения наведнъж, намалявайки първоначалното време за зареждане на страницата. Потребителите могат да започнат да взаимодействат с вашия сайт по-рано, което води до по-добро потребителско изживяване.
  • Подобрена реакция на страницата: Чрез зареждане на изображения, докато потребителите превъртат, уебсайтът остава отзивчив и течен, осигурявайки плавно превъртане и навигация, без да е необходимо да чакате цялото съдържание да се зареди.
  • Спестяване на честотна лента: Мързеливото зареждане спестява честотна лента, което го прави идеално за мобилни потребители и тези с бавни интернет връзки. Това може намалете потреблението на данни от уебсайта си, в полза на потребителите.
  • SEO ползи: Търсачки като Google разглеждайте скоростта на страницата като фактор за класиране. Мързеливо зареждане може повлияе положително на SEO ефективността на вашия сайт чрез подобряване на времето за зареждане.

Сега, след като разбирате защо отложеното зареждане е полезно, нека проучим как да го приложим.

Внедряване на мързеливо зареждане: HTML маркирането

За да започнете, ще трябва да промените своя HTML код, за да включите зареждане="мързелив" атрибут на вашия етикети.

<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 Зареждане Атрибутът се използва в HTML за контролиране на поведението при зареждане на елементи на уеб страница. Когато зададете зареждане="мързелив" на tag, той казва на браузъра да отложи зареждането на ресурса, докато не е необходим.

В момента страницата изглежда така:

Внедряване на мързеливо зареждане: Внедряването на JavaScript

За да изведете вашето мързеливо зареждане на следващото ниво, използвайте API на Intersection Observer. Този API ви позволява да наблюдавате кога даден елемент влиза или излиза от прозореца за изглед.

Обосновката зад използването на Intersection Observer за мързеливо зареждане на изображения е проста: когато страницата се зарежда, тя извлича изображение с по-ниско качество.

След това, когато това изображение стане видимо в прозореца за изглед, JavaScript го заменя с версията с по-високо качество. За да приложите това на практика, променете своя 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>

Тук основният източник на изображение е версията с ниско качество, а изображението с високо качество е вторичният източник. Тогава страницата изглежда така:

След това изберете всички изображения, които искате да заредите отложено:

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

След това създайте IntersectionObserver обект.

const observer = new IntersectionObserver();

След това предайте записите (масив от IntersectionObserverEntry обекти, представляващи наблюдаваните елементи и тяхното пресичане с прозореца за изглед) и наблюдател (the IntersectionObserver самият екземпляр).

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

След това проверете за пресичане и сменете изображението с ниско качество с висококачествено, когато този елемент се пресича.

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

И накрая, инициализирайте наблюдението за всеки елемент.

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

И с това сте внедрили отложено зареждане с JavaScript.

Съображения за мързеливо зареждане

Когато интегрирате отложено зареждане, става жизненоважно да вземете предвид следните аспекти:

  • Достъпност: За да осигурите достъпност, предоставете алтернативен текст за изображения с алт атрибут. Тази информация служи като опорна точка за екранните четци.
  • Съвместимост на браузъра: Преди внедряването на отложено зареждане, потвърдете неговата съвместимост с различни браузъри. Не всички браузъри разширяват поддръжката за тази функция. В някои случаи включването на полифил може да стане наложително, особено за по-стари браузъри. Инструмент като CanIUse е ценен ресурс за оценка на съвместимостта на браузъра.
  • Тестване: Изчерпателното тестване на внедряването на мързеливо зареждане в спектър от устройства и размери на екрана придобива първостепенно значение.

Подобряване на скоростта на уебсайта и потребителското изживяване

Когато включите отложено зареждане за изображения на уебсайта си, можете да ускорите сайта си и да подобрите потребителското изживяване. По-бързото време за зареждане и по-плавното сърфиране са това, което потребителите искат и тази техника осигурява същото.

Освен това ще се насладите на по-добро SEO и ще спестите от използването на честотна лента. И така, защо да чакаме? Започнете да оптимизирате уебсайта си днес с този лесен, но мощен метод.