Jak działa leniwe ładowanie?
Normalny obraz HTML wygląda tak:
<img src="sample.jpg" width="100%"/>Wtyczki z leniwym ładowaniem przepisują kod w następujący sposób:
<img data-src="sample.jpg" width="100%"/>Jak zauważyłeś,srcatrybut został zmieniony nadane-src.
Ponieważ niesrc, przeglądarka początkowo nie ładuje tego obrazu. Później mały kod JavaScript sprawdza, czy obraz znajduje się w widocznym miejscu (widocznym obszarze użytkownika) i czy jest w środku,dane-srcwraca do tegosrcktóra przeglądarka uruchamia pobieranie i wyświetlanie obrazu.
Co to jest leniwe ładowanie natywne?
Chrome jest dostarczany z „natywnym leniwym ładowaniem”. Możesz o tym przeczytać tutaj.
Lazy loading natywne ma tę zaletę, że nie wymaga JavaScriptu i jest generalnie znacznie szybsze, ponieważ przeglądarka robi to „natywnie”.
Kod wygląda tak:
<img src="sample.jpg" loading="lazy" width="100%"/>Co to są obrazy latające?
Flying Images to wysokowydajna wtyczka do leniwego ładowania. Używa "natywnego" leniwego ładowania przeglądarki, jeśli jest dostępne, w przeciwnym razie użyj zwykłego JavaScript do leniwego ładowania.
Latające obrazy mogą również ładować obrazy, zanim obrazy pojawią się w widoku.
Czy boisz się leniwego ładowania, ponieważ szkodzi to wrażeniach użytkownika?
Czym różnią się obrazy latające od innych wtyczek z leniwym ładowaniem?
- Wykorzystuje wbudowane leniwe ładowanie - użyj wbudowanego leniwego ładowania, jeśli jest dostępne (obecnie obsługiwane tylko w Chrome), w przeciwnym razie użyj JavaScript do leniwego ładowania obrazów.
- Załaduj obrazy przed wejściem do widoku - podczas gdy inne wtyczki ładują obrazy, gdy znajdują się „wewnątrz” widoku, latające obrazy ładują je, gdy mają wejść do widoku.
- Mały JavaScript - tylko 0,5 KB, skompresowany, zmniejszony.
- W razie potrzeby możesz używać tylko natywnego – chcesz obsługiwać tylko Chrome? Możesz przełączyć się na „tylko natywny”, który nie wstrzykuje JavaScript.
- Przepisuje cały kod HTML - nigdy nie przegap obrazu z powodu leniwego ładowania (nawet jeśli jest dodawany przez wtyczki galerii).
- Przezroczysty wypełniacz - do wszystkich obrazów dodawany jest maleńki przezroczysty base64. Koniec z migotaniem podczas ładowania obrazów.
- Wyklucz słowa kluczowe - Prawie wszystkie wtyczki z leniwym ładowaniem zapewniają funkcję wykluczania, jednak latające obrazy mogą również wykluczać obrazy z węzła nadrzędnego obrazu. Przydatne, jeśli obraz nie ma nazwy klasy.
- Obsługuje przeglądarki z wyłączonymi IE i JavaScript - wszystkie obrazy są ładowane natychmiast, jeśli jest to Internet Explorer lub nawet jeśli JavaScript jest całkowicie wyłączony (przy użyciu
noscriptetykietka).
