javascript pigro caricando il modo progressivo di miglioramento?

Question

Sto costruendo un sito Web per un gallerista che ha un sacco di immagini per pagina web. Quindi voglio caricare le immagini pigro sulla pagina web, rendendo il carico iniziale meno pesante. Tuttavia, vorrei implementarlo in un modo "progressivo miglioramento".

Ho trovato un sacco di metodi di caricamento lenta ma tutti hanno bisogno di giocherellare con il codice html in modo tale che la pagina Web sarebbe inutile con javascript disattivato. (ad esempio l'attributo src dei tag img rimane disattivato fino a quando le immagini non sono caricate).

per implementare un metodo di lazy loading progressivly Credo che uno avrebbe bisogno il seguente:

1. evitare che il browser di andare a prendere le immagini, anche se thers sono sulla pagina, ma farlo solo quando JavaScript è su (quindi su browser non javascript, le immagini continuano a essere caricate come normali) . Questo dovrebbe essere fatto senza alterare l'html.
2. salvare l'attributo src in un attributo data-src
3. sequentually caricare le immagini durante lo scorrimento verso il basso

Di queste tre fasi la prima sembra la più difficile. Anche this stackoverflow discussion non ha fornito una risposta che non rovini il miglioramento progressivo.

Qualcuno ha qualche idea?

Answer 1

Poiché nessuno ha trovato una risposta, posterò quello che ho trovato una soluzione ragionevole.

Questo problema si riduce a quanto segue: mentre noi vogliamo impedire che il browser di scaricare le immagini quando JavaScript è acceso, dobbiamo essere sicuri che le immagini vengono scaricate quando javascript è spento o non disponibile.

E 'difficile usare costantemente javascript per fermare il caricamento delle immagini su una pagina quando sono nel formato "normale":

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

Per fermare le immagini di scaricare avremmo dovuto rimuovere il loro src attributi, ma nell'ordine per fare ciò, il DOM dovrebbe essere già caricato. Con l'ottimizzazione di molti browser al giorno d'oggi è difficile garantire che le immagini non vengano già scaricate.

In cima a quello, certamente vogliono impedire interrompere immagini che sono già scaricando, perché questo sarebbe semplicemente uno spreco.

Pertanto, ho scelto di utilizzare la seguente soluzione:

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

Notate come le immagini al di fuori del tag noscript non hanno src ma un attributo data-src invece. Questo può essere usato da uno script lazyloading per caricare le immagini una ad una per esempio.

Solo quando JavaScript non è disponibile, saranno le immagini all'interno del blocco noscript essere visibili, quindi non c'è bisogno di caricare le .lazy immagini (e non c'è modo di farlo, dal momento che javascript non è disponibile).

Abbiamo bisogno di nascondere le immagini però:

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

Come i img tag all'interno del blocco noscript, questo blocco style saranno visibili solo al browser quando JavaScript non è disponibile.

Su una nota correlata: ho pensato che potrei ridurre la dimensione html non inserendo gli attributi src o data-src sulle immagini pigre. Questo sarebbe bello perché elimina l'URL ridondante dalla pagina, risparmiandoci una certa larghezza di banda.

Ho pensato di strappare l'attributo src dal blocco noscript utilizzando comunque javascript. Tuttavia, questo è impossibile: javascript non ha accesso ai contenuti di un blocco noscript. Lo schema sopra è quindi il più efficiente che potrei inventare.

Answer 2

La mancata specificazione di un attributo src non è un codice HTML valido, che purtroppo è il modo in cui la maggior parte dei caricatori di immagini pigri funzionano.

Sto lavorando su un lazyloader che utilizza valido markup HTML, GitHub link: https://github.com/tvler/lazy-progressive-enhancement

Un'immagine lazyloaded sarebbe stata dichiarata avvolgendolo in un elemento noscript:

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

e la l'output finale in html sarebbe

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

È possibile visualizzare l'intero progetto su GitHub, che si occupa di batch di carico, evento agganciando più &, ma ecco la funzionalità di base presso il campo di applicazione di una singola immagine noscript:

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