Zgodnie ze standardami tworzenia stron www media takie jak zdjęcia, które znajdują się poniżej linii zgięcia powinny być ładowane z opóźnieniem. Czym jest ta linia zgięcia i dlaczego zdjęcia mają być ładowane z opóźnieniem?

Linia zgięcia jest to miejsce na stronie internetowej poniżej którego treść strony www nie jest widoczna w przeglądarce. Treść ta pojawia się dopiero jak użytkownik przewinie okno przeglądarki. Zdarza się tak, że użytkownik nie przewija okna do samego dołu więc treści poniżej linii zgięcia ładują się niepotrzebnie. W efekcie transfer zużyty do załadowania strony został wykorzystany niepotrzebnie.

Zdjęcia podczas ładowania strony www zużywają najwięcej transferu dlatego przydatnym narzędziem jest biblioteka jquery lazy load autorstwa  Daniel 'Eisbehr' Kern dostępna na github:  https://github.com/dkern/jquery.lazy. Użycie biblioteki było bardzo proste. Należało dołączyć bibliotekę do kodu strony. Następnie następnie ją uruchomić:

$(document).ready(function(){
$('.lazy').lazyload();
});



Od tej pory każde zdjęcie, które ma dodatkową klasę .lazy jest ładowane z opóźnieniem. Przykład poniżej

<img src="zdjecie.jpg" alt="Zdjęcie" class="lazy" />

Od niedawna w przeglądarkach jest obsługiwany nowy parametr, który pozwala na definiowanie nowego atrybutu dla tagu <img>, który definiuje jakie zdjęcia mają być ładowane z opóźnieniem a jakie natychmiastowo. Podczas kodowania zdjęcia można dodać nowy atrybut

<img src="zdjecie.jpg" loading="eager|lazy|auto">

Wartość eadger oznacza, że zdjęcie ma zostać ładowane natychmiastowo, wartość lazy oznacza, że zdjęcie ma być ładowane z opóźnieniem a wartość auto oznacza, że przeglądarka ma zdecydować czy załadować zdjęcie z opóźnieniem czy natychmiastowo. Atrybut jest na dzień dzisiejszy wspierany przez wszystkie przeglądarki. Chrome od wersji 77.00, Edge od wersji 79.00, Firefox od wersji 75.00, Safari od wersji 12.