blog
user
08 042021

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.


Nasze newsy

Śledź nasze aktualności.

blog
user
28 012023

Adaptacja fullcalendar w Octobercms

Przykład adaptacji fullcalendar w panelu Octobercms.

blog
user
05 122022

Konferencja Infoshare AI

Sztuczna inteligencja zatacza coraz szersze kręgi w branży IT. Z roku na rok zastosowania algorytmów sztucznej inteligencji są coraz większe.

blog
user
13 102022

Blokowanie podobnych zdjęć

Jak opracować blokowanie podobnych zdjęć w webaplikacji.

logo

Masz pytania? Skontaktuj się