Jak działa leniwy ładowanie obrazów przy użyciu JavaScript?

Question

Ciekawi mnie, jak działają luźne obrazy, obrazy, które zostaną załadowane po przewinięciu do nich.

Dowolna podpowiedź?

Answer 1

Oto jak to zrobić za pomocą wtyczki: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ oto plugin jquery: http://www.appelsiini.net/projects/lazyload

zasadzie umieścić manekina obrazu w atrybucie src i dodać kolejny atrybut dla rzeczywistego obrazu, JS wykrywa pozycję zwoju stronę i ładuje dane obrazu po zbliżeniu się do obrazu. robi to, zastępując źródło src źródłem rzeczywistego obrazu.

oto kolejny wyjaśnienie: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

Answer 2

Istnieje wiele sposobów, aby wdrożyć leniwy załadunku. Proces polega tylko na tym, że ładujesz to, czego potrzebujesz. Możesz leniwego załadować wszystko na scenie oprogramowania. Na stronach internetowych najczęściej używa się go podczas wczytywania obrazów, a dzieje się tak, ponieważ większość strony internetowej to właściwie tylko obrazy. Mam na myśli grafiki strony oraz rzeczywiste zdjęcia osób, które mogą mieć tysiące zdjęć na twoim serwerze. Zwykle powoduje spowolnienie, gdy próbujesz załadować wszystkie z nich w tym samym czasie. W pewnym momencie zaczyna spowalniać proces. Leniwe ładowanie zwykle odbywa się w przypadku dużych stron internetowych. Tak jak powiedziałem, możesz zrobić to na wiele sposobów. jeden sposób był już podany. Czy tag img jest już załadowany, ale część src wskazuje na plik obojętny o niewielkim rozmiarze. Nie używaj obrazu graficznego ani obrazka ... użyj czegoś w rodzaju szarego bloku .. lub niczego nie używaj. Następnie, gdy część przewijania znajduje się w pobliżu punktu przewijania, w którym znajdują się obrazy. Uruchomi on funkcję, w której zastąpi src rzeczywistym łączem do obrazu. Innym sposobem jest użycie ajax i punktu przewijania, gdy close się dopisze ... wczytaj rzeczywisty kod html z obrazem w src. Właśnie tego używam. Piszę plik PHP do leniwych obrazów, danych, tekstu.

Celem tej metody jest pobranie plików ze strony internetowej w razie potrzeby. Po załadowaniu obrazu jest on faktycznie pobierany z serwera. Tak więc proces pobierania wraz z faktycznym czasem ładowania może się zwiększyć, gdy zaczniesz zajmować się większymi plikami obrazów i ich zbyt dużą liczbą.

Answer 3

Można użyć justlazy, która jest niezależna od uzależnień, takich jak jQuery i bardzo lekka:

Jedynym zadzwonić czego potrzebujesz to:

var placeholders = document.querySelectorAll(".load-if-visible"); 
 
for (var i = 0; i < placeholders.length; ++i) { 
 
    Justlazy.registerLazyLoad(placeholders[i]); 
 
}

Symbole zastępcze muszą być następująca struktura:

<span data-src="url/to/image" data-alt="some alt text" 
 
     data-title="some title" class="load-if-visible"> 
 
</span>

Ze względów SEO można użyć dowolnego innego elementu zastępczego (np. obraz zastępczy).

Dodatkowo jest przewodnik, jak z niego korzystać i kilka ogólnych rzeczy na temat leniwego ładowania obrazów.

Answer 4

Przykład, jak to zrobić, z łatwością.

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg"> 

"Leniwi.jpg "może być użyty na wszystkich obrazach, co spowoduje załadowanie tylko jednego obrazu (i jest to obraz o małej wadze 1x1px). Więc pomyśl, że mam listę 250 sklepów do odwiedzenia, z logo firmy dla każdego . może wyglądać następująco:

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg"> 
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg"> 
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg"> 
... 

Potem przychodzi magię umieścić to w pliku javascript:

$('img[src="/images/lazy.jpg"]').each(function(index, el) { 
    $(el).attr('src', $(el).data('real-src')); 
}); 

I wacka-wacka, wszystkie obrazy lazy.jpg zostaną zastąpione przez ich " prawdziwe "obrazy", aby ładowanie strony html było szybsze (ponieważ te 250 firm ma to samo "logo" w lazy.jpg :) ... Ale JS zajmuje się tym wszystkim po DOM-u finishe d załadowany.

To oczywiście rozwiązanie jQuery. Można to zrobić również z czystym js.

Answer 5

Lazy zdjęć ładowanie przy użyciu konwencjonalnego sposobu mocowania słuchacza do przewijania zdarzenia lub poprzez wykorzystanie setInterval jest bardzo non-wydajnych jak każdego wywołania getBoundingClientRect() zmusza przeglądarkę do re-layout całą stronę i wprowadzi znaczne Jank do Twoja strona internetowa.

Zastosowanie Lozad.js (tylko 569 bajtów bez uzależnień), który korzysta InteractionObserver do leniwych load performantly.