Precargar imagenes con Jquery


Hoy en día para los desarrolladores web, con el uso cada vez mas intenso de las tecnologías como ajax que hacen capaz posible que una aplicación web se asemeje cada vez mas a una aplicación de escritorio, nos es necesario encontrar una manera en la que nuestras aplicaciones no se saturen con peticiones http al servidor tratando de cargar la gran cantidad de recursos (imágenes, etc) que son tan habituales hoy en día.

Este es un truco bastante sencillo que nos asegura que las imágenes que utilicemos en nuestro sitio web estaran completamente cargadas una vez que las necesitemos :).

Obviamente primero carga la librería de Jquery y después puedes escribir un código como este

var image1 = $('<img />').attr('src', 'imageURL.jpg');

puedes escribir tantas variables como imágenes quieras tener cargadas :), lo que Jquery realiza con el código anterior es la creación y la carga de los elementos del DOM que le pasemos, en este caso imágenes, es realmente muy sencillo de implementar y nos asegura que los recursos estarán ahí cuando los necesitemos 🙂

Después de eso lo que podemos hacer es insertar la imagen una vez cargada, el código seria el mas o menos el siguiente

var image1 = $('<img />').attr('src', 'imageURL.jpg');

// Insertar la imagen precargada
$('.profile').append(image1);
// o
image1.appendTo('.profile')

salu2

Si te gusto comparte ...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

6 pensamientos en “Precargar imagenes con Jquery

      1. Enrique
        Google Chrome 11.0.696.71 Windows XP

        hola Master mira he buscado como poner un albun o varias fotos en mi blog , pero no hayo como hacerlo y lo que quiero es darle ese efecto donde las fotos vas cambiando , soy nuevo a esto de echo estoy estudiando la carrera de derecho , pero me llama mucho la atencion esto de los blones , apenas empece .Me podrias orientar como realizo una libreria en jquery o como le hago para colocarla en mi pagina que apenas estoy contruyendo , la hice en blogspot.
        Por tu tiempo y atencion Gracias

        Responder
        1. Alevsk Autor
          Firefox 4.0.1 Mac OS

          Hola, lo que tu quieres implementar (segun lo que entiendo) es un slider, puedes hacerlo desde 0 tu, o puedes descargar algunos de Internet que son muy buenos como por ejemplo jCarousel que es muy facil de implementar :), como dices que apenas vas aprendiendo te recomiendo la segunda opcion, ahora, comentabas que tienes tu blog en blogger verdad?, encontre un tutorial muy bueno que te explica paso por paso como implementar un carrucel de imagenes en blogspot Tutorial.

          Cualquier duda aqui estoy amigo.

          salu2

          Responder
          1. Enrique
            Google Chrome 11.0.696.71 Windows XP

            Mil gracias por tu tiempo y dedicacion a mis lineas, te agradesco tu contestacion, y voy a ir a la pagina que me recomendaste . Gracias
            y buen inicio de mes

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *