Cargar imágenes del navegador con javascript evento?

Question

Tengo una página que contiene una gran cantidad de imágenes, que están ocultos a la vista inicialmente como yo estoy usando divs con pestañas (es decir, ocultando algunos divs usando CSS display:. Ninguno).

Por lo tanto, cuando se carga la página, a continuación, se tarda mucho en cargarse todas las imágenes, que se parece a la página es lenta (como la barra de carga en el navegador no se completa durante más de 10 segundos).

Me gustaría una forma de no cargar imágenes hasta que son visibles en la página.

He jugado un poco con jQuery LazyLoad , sin embargo, esto sólo parece cargar imágenes cuando desplazamiento del navegador (que no funciona para divs con pestañas).

Por lo tanto, hay una manera de cambiar LazyLoad de trabajo como este, o hay una mejor manera de hacer esto?

Gracias!

Answer 1

Yo no estaba al tanto de esta anteriormente, pero hace LazyLoad apoyo activación de eventos:

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

Si alguien necesita una mano sobre cómo hice esto, que me haga saber!

Answer 2

jQuery aquí podría hacer lo que necesita, con llamada AJAX en las pestañas ...

¿Cómo mostrar su divs ocultos?

Answer 3

Un plan de ataque:

En lugar de poner la URL de la imagen en el atributo src de la etiqueta img, ponerlo en otro lugar (por ejemplo, un lapso escondida con una clase particular por encima de ella) y al mostrar el div, iterar a través de todas las etiquetas img y establecer el src a la URL que debería haber tenido.

Como un método que, definitivamente, tiene algunas desventajas.

Answer 4

Si está utilizando (o puede utilizar) el tipo de documento HTML 5, se puede utilizar el "Data-" como prefijo para los atributos de la etiqueta:

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

Y a continuación, puede utilizar Javascript para llenar el src con los datos-src:

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

Answer 5

Si su único objetivo es 'esconder' la barra de progreso que está teniendo mucho tiempo debido a la gran cantidad de imágenes, me gustaría ir a algún tipo de solución AJAX, ya que de esa manera la barra de progreso no se 'usa' . Sí introduce una mayor complejidad en la forma en que desea cargar sus elementos HTML (y posiblemente cuando).

Yo personalmente no me gusta usar atributos HTML para que no sea su propósito original nada, por lo que el almacenamiento de la ruta en otro atributo y cambiar cuando sea necesario, no sería mi primera opción. En su lugar, que iba a tratar de crear una matriz de JavaScript (id => ruta) y actualizar los elementos IMG HTML separados cuando sea necesario.

Buena suerte! ;)

Answer 6

He intentado que últimamente y tengo que decir que esto no es posible con js más. Tal vez nunca ha sido ... Proyectos como lazyload siempre han proclamado que dejarían de todas las imágenes de la carga en el arranque, pero se puede ver en Firebug que esto no funciona. Las imágenes se cargan incluso dos veces, en domready y cuando se inicia el desplazamiento ...

Sus únicas opciones sería Ajax en la mano o en hacer algo como esto:

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

y luego cambiar atributos cuando los divs se hacen visibles, por lo que la imagen comienza la carga.

Esta bien funciona tan bien al menos si no es necesario indexación de Google ellos.

Espero que ayude! :)

Editar: Hm, ¿por qué me sale un -1 cuando tenía sólo Givin una respuesta? Sólo echar un vistazo a las páginas con lazyload y activar Firebug y luego desplazarse por la página. Se llegó a decir aquí en stackoverflow y en los comentarios para el plugin lazyload que esta es la única solución en este momento ...: (