Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Queremos mejorar la calidad de nuestros cursos. Por favor ayúdanos llenando esta pequeña encuesta
Cargando imágenes en segundo plano para tu web con jQuery
Actualizado el 10 Enero, 2016 y leído 6,535 veces
Calificación: 10.00 / 10

Cargando imágenes en segundo plano para tu web con jQuery

Anexsoft

Bien muchachos, en mi último proyecto que estuve trabajando se usan muchas imagenes entonces se me ocurrio usar un plugin llamado jquery lazy el cual te permite cargar las imagenes en segundo plano. Pero, al ver el plugin me di cuenta que su lógica era sencilla y me puse a investigar el tema llegando a mi propia solución la cual es bastante elegante.

 

Lo primero que vamos hacer es crear una clase genérica que contendra un fondo blanco y un gif animado de una imagen de cargando, este nos servirá para mostrar algo mientras la carga se realiza.

.cargador{background:#fff url(images/ajax-loader.gif) no-repeat center center;}
.cargador img{display:none;}

Ahora si nos ponemos a examinar nuestra clase, este esta diciendole que todas las imagenes que esten por debajo de la clase .cargador se oculten. Esto lo hago ya que mientras que la imagen es cargada quiero mostrar el efecto de loading.

 

Ahora vamos a lo interesante, vamos agregar el código HTML de nuestras imagenes pero con un ligero cambio.

<div class="img cargador">
    <img data-src="images/a.jpg" class="post-carga" />
</div>
  • Nuestra imagen esta dentro de nuestro div .cargador

  • No estamos llamando al atributo src, ya que si lo hacemos la imagen será cargada por defecto, y no queremos que pase eso porque va a volver lenta la carga de nuestra web. Del caso contrario lo hacemos usando el atributo data-src de HTML5, allí debemos especificar la ruta de la imagen.

  • Le hemos agregado a nuestra imagen una clase más llamada .post-carga, esta la llaremos desde jQuery

 

Muy bien, ahora vamos al script de jQuery ..

function CargarImagenes()
{
    $(".post-carga").each(function(){
        $(this).attr('src', $(this).data('src')).load(function(){
            $(this).fadeIn();
        });
    })  
}

$(window).load(function(){
    CargarImagenes();
})
  • Creamos una función llamada CargarImagenes() que contendra la lógica que voy a explicar líneas abajo.

  • Lo que hacemos es recorrer todos los elementos que contengan la clase .post-carga.

  • Luego le decimos que a la propiedad src de nuestra imagen le agregue el valor que habíamos seteado en el data-src. De esta manera cargamos hacemos mostrar la imagen.

  • Luego mostramos la imagen cuando esta haya sido cargada por completa con la función load.

  • Por último ejecutamos la función dentro del evento windows.load(), ya que de esta manera le decimos que cuando la ventana este lista se ejecute la postcarga.

 

Tips: los divs contenedores de las imagenes deben tener especificado el alto y ancho que va a ocupar la imagen para que el efecto funcione bien, del caso contrario al mostrarse la imagen esta empujará los elementos html y se vera algo extraño ...

Tambíen adjunto el ejemplo para que lo puedan descargar y estudiar.

PD: si tienes una idea para mejorar el script deja un comentario que yo luego actualizare el post agregando tus créditos y mejoras.

 

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.