jquery – precarga de imagenes en segundo plano by javirey.es

Fuente: javirey.es

La precarga de imágenes en un segundo plano es de gran ayuda cuando, tras haber cargado la página, hemos de cargar alguna imagen de cierto peso en respuesta a un evento. Un ejemplo: tenemos una página con varias secciones y una de estas secciones es una galería fotográfica compuesta por miniautras de imágenes que, al pinchar sobre ellas, nos mostrarán la imagen ampliada. Si en nuestra página cargamos desde el principio todas estas imágenes ampliadas y además tenemos muchas imágenes en nuestra galería, lo que ocurrirá será que nuestra página tardará mucho en cargar. Esto puede desesperar a la gente que quiera entrar en la página ( y que no tiene porqué saber que, una vez cargada la página, ya no tendrá que esperar más ). Una manera de solucionar este problema es cargar en nuestra web sólo las miniaturas de las imágenes ( ya que necesitamos que estén visibles desde el primer momento ) y, una vez cargada la página, empezaremos a cargar las imágenes ampliadas en un segundo plano. De este modo, cuando alguien pinche en la imagen pequeña se le abrirá la foto ampliada igual de rápido que si hubiera cargado toda la web de una sola vez. El usuario no se entera de nada de todo esto y nuestra web es mucho más ligera.

Esto se hace en dos pasos. El primer paso es crear un archivo .js con el siguiente código o añadir el código a cualquier .js que estemos usando en nuestra web ( yo recomiendo crear un nuevo .js para futuros usos ):

(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i–;) {
var cacheImage = document.createElement(‘img’);
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)

El segundo paso es incluir en nuestro html una llamada a las imágenes que se cargarán en segundo plano

<script type=”text/javascript”>
jQuery.preLoadImages(“la_ruta_a_tu_imagen/tuimagen.jpg”, “la_ruta_a_tu_imagen2/tuimagen2.jpg”, “la_ruta_a_tu_imagen3/tuimagen3.jpg”, “la_ruta_a_tu_imagen3/tuimagen3.jpg”);
</script>

Anuncios

2 comentarios sobre “jquery – precarga de imagenes en segundo plano by javirey.es

  1. ¿Cómo podría cargar una serie de imágenes totales guardadas en una carpeta como tal? Sin importar el número que sea. es decir, en vez de colorcar esta línea de código:

    jQuery.preLoadImages(“la_ruta_a_tu_imagen/tuimagen.jpg”, “la_ruta_a_tu_imagen2/tuimagen2.jpg”, “la_ruta_a_tu_imagen3/tuimagen3.jpg”, “la_ruta_a_tu_imagen3/tuimagen3.jpg”);

    Colocar algo así como:

    jQuery.preLoadImages(“carpeta/*.*”);

    Espero se entienda mi pregunta. Muchas gracias.

    1. se entiende, no te preocupes

      ante todo perdon por la tardanza en mi respuesta, cae de cajon que el problema ya lo has resuelto hace mucho tiempo pero aun asi respondo para otras personas que se puedan encontrar con el mismo problema

      deberias usar un bucle para que recorra toda las fotos de la carpeta, lo que no se decirte asi de memoria es si javascript puede reconocer archivos d eimagen en una carpeta, pero si las fotos las tienes en la base de datos puedes hacer un array en javascript que rellene php con los nombres de los archivos y luego con un bucle for recorrer el array para que te las muestre todas

      var myStringArray = [“foto1.jpg”,”foto2.jpg”];
      var arrayLength = myStringArray.length;
      for (var i = 0; i < arrayLength; i++) {
      alert(myStringArray[i]);
      //Do something
      jQuery.preLoadImages(“la_ruta_a_tu_imagen”.myStringArray[i]);
      }

      no he probado el codigo, igual me he colado en alguna sintaxis pero la base es esa

      espero haberte servido de ayuda

      un saludo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s