¿Imágenes de carga lenta, la mejor manera de mostrar una imagen temporal? JQuery tal vez?

Question

Estoy usando Google Charts para mostrar los datos de gráficos en mi aplicación. A veces Google es lento y los gráficos tardarán un tiempo en cargarse. Este escenario parece ser un patrón bastante común, así que me pregunto cuál es un buen enfoque para mostrar una imagen temporal, mientras que la imagen se entrega desde Google. Tengo acceso a jQuery y he visto una cantidad de complementos de "precarga". Es esto lo que necesito?

¿El término correcto para este escenario/patrón se llama realmente "precarga de imagen"?

Me encantaría escuchar lo que la gente usa para resolver esta situación.

gracias

Answer 1

Puede mostrar uno de esos gifs de carga que se encuentran en http://ajaxload.info/ mientras se está cargando la imagen. Después de cargar la imagen, ocultas el gif de carga y muestras la imagen.

verifique http://jqueryfordesigners.com/image-loading/ para obtener un tutorial.

Answer 2

imagen precarga es por lo general cuando las imágenes se descargan en previsión partir de la solicitud, pero antes de que el usuario realmente hace una petición a verlos. Creo que el pensamiento actual es que esto generalmente agrega sobrecarga, a menos que se pueda esperar que un gran porcentaje de sus usuarios vea la imagen.

Answer 3

Las imágenes tienen un evento onload que se disparará una vez que la imagen haya terminado de cargarse.

Puede escuchar ese evento y, hasta que se encienda, mostrar otra imagen.

<script> 
function showImage() { 
    $("#blah").show(); 
    $("#temp").hide(); 
} 
</script> 

<img id="temp" src="temp_image.png" /> 
<img id="blah" src="blah.png" onload="showImage();" style="display:none;"/> 

Answer 4

No, no es necesario precargar (esto supone el bloqueo de la carga de la página mientras se cargan las imágenes designadas). usted necesita mostrar un gráfico de carga.

$(.loading).css({ 
    'background-image':'myLoading.gif', 
    'background-repeat: 'no-repeat', 
    height: 25, 
    width: 25 
}).load(function(){ 
    $(this.css({ 
    'background-image': null, 
    height: 'auto', 
    width: 'auto' 
    }); 
}); 

O algo por el estilo ... altura y anchura nota debe ser el tamaño de la imagen loaing ... a menos que sepa el tamaño de la imagen usted está tirando hacia abajo.

Answer 5

La precarga no es el camino a seguir. Si su imagen está directamente visible en su aplicación, su navegador la cargará lo más rápido posible y no podrá cargarla más rápido utilizando Javascript.

Lo que puede hacer es cargarlo más despacio.

Parece que considera que la carga de la imagen es lenta porque desea que sea inmediata. Difícil de ser más rápido que inmediato.

Tal vez puedas intentarlo de otra forma. Diseñe su aplicación para que el gráfico se muestre cuando el usuario interactúa con algo (haga clic en un botón, un enlace, etc.) y luego cargue el gráfico cada vez que el usuario lo solicite.

Veo 2 ventajas para esto, principalmente para usuarios de bajo ancho de banda (¿usuarios móviles?):

• usuarios que no quieren que el gráfico no se verá afectado por su proceso de carga de larga
  • que conocemos como diseño de la página, mientras que el cambio de imagen se carga
• el ancho de banda inicial el uso de su aplicación será más bajo, lo que hará que se vea más receptivo
  • cuanto menos imágenes cargue inicialmente, más rápido estará el navegador listo

Idea robado descaradamente de AppleInsider móvil versión

Answer 6

carga solución de (muy) gran imagen intuitiva. Por ejemplo:

1. miniaturas son de 100 x 75, grandes imágenes para cargar el tamaño de 960x720,
2. onClick miniatura - empezamos load('/images/audi_big.jpg') imagen grande,
3. después de que sustituir la imagen oryginal $("#big_image img").attr({src: '/images/audi_120px.jpg'}); y tenemos miniatura width = "960".
4. Sobre esa capa opcional añadir información LOADING {CSS}z-index: 1,
5. si la imagen grande cargada hacerlo: $("#big_image img").attr({src: '/images/audi_big.jpg'});