Caricare le immagini del browser con l'evento javascript?

Question

Ho una pagina contenente un sacco di immagini, inizialmente nascosti alla vista come sto usando div a schede (vale a dire che nasconde alcuni div usando CSS display:. Nessuno).

Pertanto, quando l'allora pagina carica, ci vuole molto tempo per caricare tutte le immagini, che appare come la pagina è lento (come la barra di caricamento del browser non completa per 10+ secondi).

vorrei un modo per non caricare immagini fino a quando non sono visibili sulla pagina.

ho giocato in giro con jQuery LazyLoad , tuttavia questo sembra solo per caricare le immagini quando lo scorrimento del browser (che non funziona per div a schede).

Quindi, c'è un modo di cambiare LazyLoad al lavoro come questo, o c'è un modo migliore di fare questo?

Grazie!

Answer 1

I era a conoscenza di questo in precedenza, ma non LazyLoad sostegno innescando da eventi:

http://www.appelsiini.net/projects/lazyload

Se qualcuno ha bisogno di una mano su come ho fatto questo, me lo faccia sapere!

Answer 2

jQuery Tabs poteva fare quello che ti serve, con la chiamata ajax nelle schede ...

Come si fa a visualizzare i tuoi div nascosti?

Answer 3

Un piano d'attacco:

Invece di mettere l'URL dell'immagine nel l'attributo src del tag img, metterlo da qualche altra parte (ad esempio un arco di nascosto con una particolare classe sopra di esso) e quando mostra la div, scorrere tutti i tag img e impostare lo src all'URL che avrebbe dovuto avere.

Come metodo è sicuramente ha alcuni aspetti negativi.

Answer 4

Se si sta utilizzando (o può usare) il doctype HTML5, è possibile utilizzare il "data-" prefisso per attributi di tag:

<img src="" data-src="/path/to/image" style="display: none" />

E quindi è possibile utilizzare Javascript per riempire lo src con i dati-src:

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src"));

Answer 5

Se il vostro unico obiettivo è quello di 'nascondere' la barra di avanzamento che sta prendendo così tanto tempo a causa del gran numero di immagini, mi piacerebbe andare per qualche tipo di soluzione AJAX, dal momento che in questo modo la barra di avanzamento non viene 'usato' . Lo fa introdurre una maggiore complessità nel modo in cui si desidera caricare i vostri elementi HTML (ed eventualmente quando).

Io personalmente non come l'utilizzo di attributi HTML per qualcosa di diverso dal loro scopo originale, in modo da memorizzare il percorso di un altro attributo e il passaggio in caso di necessità, non sarebbe la mia prima opzione. Invece, mi piacerebbe provare a creare una matrice JavaScript (id => percorso) e aggiornare gli elementi IMG HTML separati in caso di necessità.

In bocca al lupo! ;)

Answer 6

Ho provato che ultimamente e devo dire che questo non è possibile con js più. Forse non è mai stato ... Progetti come lazyload hanno sempre proclamato che avrebbero smesso di tutte le immagini dal caricamento all'avvio, ma si può vedere in Firebug che questo non funziona. Le immagini vengono caricate anche due volte, il domready e quando si inizia a scorrimento ...

I tuoi uniche scelte sarebbe ajax sul portata di mano o di fare qualcosa di simile:

<img src="transparent.gif" alt="" rel="real image source" />

e quindi passare attributi quando div diventano visibili, così l'immagine inizia caricamento.

Questo funziona bene così, almeno se non si google bisogno di loro indicizzazione.

Speranza che aiuta! :)

Modifica: Hm, perché ho ricevuto un -1 quando ero solo GIVIN una risposta? Basta dare uno sguardo a pagine con lazyload e attivare Firebug e poi scorrere la pagina. E 'stato anche detto qui su StackOverflow e nei commenti per il plugin lazyload che questa è l'unica soluzione al momento ...: (