leniwy javascript ładowanie progresywnego sposobu poprawy?

Question

Buduję witrynę dla właściciela galerii, który ma wiele zdjęć na stronę. Dlatego chcę leniwy załadować obrazy na stronie internetowej, dzięki czemu początkowy ładunek mniej ciężki. Chciałbym jednak wprowadzić to w "postępowym ulepszaniu".

Znalazłem wiele leniwych metod ładowania, ale wszystkie wymagają manipulowania kodem html w taki sposób, że strona internetowa byłaby bezużyteczna przy wyłączonym javascript. (np. atrybut src znaczników img pozostaje niezaznaczony, dopóki obrazy nie zostaną wczytane).

celu realizacji leniwe metodę ładowania progressivly myślę, że jeden musi spełniać następujące wymagania:

1. zapobiec przeglądarki z pobierania obrazów, choć thers są na stronie, ale tylko to zrobić, gdy JavaScript jest na (więc w przeglądarkach innych niż javascript, obrazy nadal są ładowane jak zwykle). Należy to zrobić bez zmiany html.
2. zapisać atrybut src w atrybucie
3. data-src sequentually załadować obrazy podczas przewijania w dół

Spośród tych trzech krokach pierwszy wydaje się najtrudniejszy. Nawet this stackoverflow discussion nie dostarczył odpowiedzi, która nie zepsułaby progresywnego ulepszania.

Czy ktoś ma jakieś pomysły?

Answer 1

Ponieważ żadna nie wymyśliła odpowiedzi, opublikuję to, co uznałem za rozsądne rozwiązanie.

Ten problem sprowadza się do następujących kwestii: mimo że chcemy uniemożliwić przeglądarce pobieranie obrazów po włączeniu javascript, musimy mieć pewność, że obrazy zostaną pobrane , gdy javascript jest wyłączony lub niedostępny.

Trudno konsekwentnie używać javascript, aby zatrzymać ładowanie obrazów na stronie, gdy są w „normalnym” formacie:

<img src="path/to/image.jpg"></img> 

aby zatrzymać pobieranie obrazów musielibyśmy usunąć ich src atrybuty, ale aby to zrobić, DOM powinien być już załadowany. Przy optymalizacji wielu przeglądarek w dzisiejszych czasach trudno jest zagwarantować, że obrazy nie są już pobierane.

Co więcej, z pewnością chcemy zapobiec przerywaniu obrazów, które już się pobierają, , ponieważ byłoby to po prostu marnotrawstwem.

Dlatego też zdecydować się na stosowanie następujące rozwiązanie:

<img data-src="path/to/image.jpg" class="lazy"></img> 
<noscript> 
    <img src="path/to/image.jpg"></img> 
</noscript> 

zauważyć jak obrazy poza znacznikiem noscript nie mają src ale data-src zamiast atrybutu. Może to być użyte przez skrypt lazyloading do ładowania obrazów jeden po drugim na przykład.

Dopiero kiedy JavaScript nie jest dostępny, obrazy wewnątrz bloku noscript być widoczne, więc nie ma potrzeby, aby załadować .lazy obrazów (i nie sposób to zrobić, ponieważ JavaScript jest niedostępna).

potrzebujemy, aby ukryć obrazy, choć:

<noscript> 
    <style> 
     .lazy { 
      display: none; 
     } 
    </style> 
</noscript> 

Podobnie jak img tagów wewnątrz bloku noscript ten style blok będzie widoczny tylko w przeglądarce, gdy JavaScript jest niedostępny.

Podobna uwaga: Pomyślałem, że mogę zmniejszyć rozmiar html, nie dodając w ogóle atrybutów src ani data-src na leniwych obrazach. Byłoby to miłe, ponieważ eliminuje zbędny URL ze strony, oszczędzając nam trochę przepustowości.

Pomyślałem, że mogę skasować atrybut src z bloku noscript przy użyciu javascript. Jest to jednak niemożliwe: javascript nie ma dostępu do zawartości bloku noscript. Powyższy schemat jest zatem najskuteczniejszy, jaki mogę wymyślić.

Answer 2

Brak określenia atrybutu src jest nieprawidłowy HTML, który jest niestety, jak działa większość leniwych programów ładujących obrazy.

Pracuję na lazyloader który używa prawidłowych znaczników HTML, GitHub link: https://github.com/tvler/lazy-progressive-enhancement

lazyloaded obraz zostanie uznany przez owinięcie go w noscript element:

<noscript><img alt="hello!" src="..."></noscript>

i ostateczny wynikowy kod HTML to:

<img alt="hello!" src="...">.

Można zobaczyć cały projekt na github, która zajmuje się załadunkiem wsadu, wydarzenie podpinania & więcej, ale tutaj jest podstawową funkcjonalność w zakresie pojedynczego noscript obrazu:

var noscript = document.querySelector('noscript'), img; 
(img = document.createElement('div')).innerHTML = noscript.textContent; 
noscript.parentElement.replaceChild(img.firstChild, noscript);