Lazy loading. Czy moje rozwiązanie jest poprawne?

Question

Postanowiłem użyć lazy loadning za pomocą atrybutów obrazków loading="lazy".
Nie chciałem dodawać dodatkowego kodu js.
Wymyśliłem, że pod obrazkami będzie się obracał  loading spinner.
Załadowany obrazek, przykryje animacje loading spinner.

Czy to rozwiązanie jest poprawne, czy zapomniałem o czymś?

PS. Jestem zaskoczony, że to forum jeszcze żyje i się ma dobrze. Tak trzymać! :)

Answer 1

Atrybut loading="lazy" powinien wczytać obrazki zanim do nich zescrollujesz więc jest mała szansa aby zobaczyć loader. Gdy mówimy o obrazkach widocznych na samej górze strony wówczas warto zrezygnować z takich zabiegów całkiem. One mają się wczytać najszybciej jak to możliwe ;)

Moim zdaniem warto sobie ten loader odpuścić.

Minusem rozwiązania na atrybucie  loading jest wsparcie w przeglądarkach. Safari ma to gdzieś :/ Ale szczerze mówiąc ja skupiam się na normalnych przeglądarkach. Działa to bardzo spoko i sam korzystam tylko z atrybutu loading już od wielu miesięcy :)

Answer 2

Chodzi w tym o to aby załadować tylko te zasoby/grafiki które są potrzebne w tym konkretnym momencie i zminimalizować czas oczekiwania. Jeśli użytkownik zacznie skrolować w dół na bieżąco będą pobieranie potrzebne grafiki. Logiczne?

Taka jest idea ładowania leniwego dla zdjęcia na stronie. 

Czy to rozwiązanie jest poprawne

pytanie pojawia się co chcesz osiągnąć czymś takim?  Imo ładowanie kilku obrazków na stronie to nie jest jakieś wyzwanie, żeby  miało znacząco wpływać na prędkość np renderowania strony czy korzyści, jeśli istotnie obrazki nie są związane z jakimiś innymi istotnymi akcjami, które mogły by blokować jak dodatkowe pobieranie zasobów etc. 

Comments

Rozumiem ideę lazy loading. Moje pytanie dotyczy wstawienie animacji ładowania przed pojawieniem się zdjęcia.
Nie spotkałem się z takim rozwiązaniem, większość rozwiązań jest oparta na js.
To będzie na stronie z listą zajawek postów ze zdjęciami. Po czasie może ich być dużo.