Precargar imágenes usando jquery

Question

En mi página web algunas imágenes tardan mucho tiempo en cargarse en IE. Así que las usé para cargar imágenes en mi página. Pero el problema persiste. ¿Alguna sugerencia?

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
    alert("Done Preloading..."); 
} 

// Usage: 

preload([ 
    '/images/UI_1.gif', 
    '/images/UI_2.gif', 
    '/images/UI_3.gif', 
    '/images/UI_4.gif', 
    '/images/UI_5gif', 
    '/images/UI_6.gif', 
    '/images/UI_7.gif', 
    '/images/UI_8.gif', 
    '/images/UI_9.gif' 
]); 

<

div>

Answer 1

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

// Insert preloaded image into the DOM tree 
$('.profile').append(image1); 
// OR 
image1.appendTo('.profile'); 

Pero la mejor manera es utilizar una función de devolución de llamada, por lo que inserta la imagen precargada en la aplicación cuando se ha completado cargando. Para lograr esto simplemente use .load() jQuery event.

// Insert preloaded image after it finishes loading 
$('<img />') 
    .attr('src', 'imageURL.jpg') 
    .load(function(){ 
     $('.profile').append($(this)); 
     // Your other custom code 
    }); 

Actualización # 1

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(index){ 
     $('<img />') 
     .attr('src', arrayOfImages[index]) 
     .load(function(){ 
      $('div').append($(this)); 
      // Your other custom code 
     }); 
    }); 
    alert("Done Preloading..."); 
} 

// Usage: 

preload([ 
    '/images/UI_1.gif', 
    '/images/UI_2.gif', 
    '/images/UI_3.gif', 
    '/images/UI_4.gif', 
    '/images/UI_5gif', 
    '/images/UI_6.gif', 
    '/images/UI_7.gif', 
    '/images/UI_8.gif', 
    '/images/UI_9.gif' 
]); 

Answer 2

Prueba este plugin de jQuery: http://farinspace.com/jquery-image-preload-plugin/

Se le permite agarrar img elementos mediante un selector y hacer que ellos precarga. No estoy seguro de si las imágenes que desea cargar previamente ya se encuentran en el código HTML, si son usted podría estar interesado por este plugin, ya que le permite hacer:

$('#content img').imgpreload(function() 
{ 
    // this = jQuery image object selection 
    // callback executes when all images are loaded 
}); 

tiempo que permite precargar imágenes manualmente con nombres de archivo:

$.imgpreload('/images/a.gif',function() 
{ 
    // this = new image object 
    // callback 
}); 

Answer 3

Imágenes sprites pueden hacer cosas tremendamente (pero asegúrese de que comprimirlos usando algo como ImageOptim). A continuación, aloje todas sus imágenes en un CDN en algún lugar (sugiero Amazon S3/CloudFront). Y, por último, precargue todas sus imágenes usando algo como lo siguiente, e intente llamar esto lo antes posible. ¡Espero que esto ayude!

function loadImages(){ 
    var images = [ 
     'http://cdn.yourdomain.com/img/image1.png', 
     'http://cdn.yourdomain.com/img/image2.jpg', 
     'http://cdn.yourdomain.com/img/image3.jpg', 
     'http://cdn.yourdomain.com/img/image4.jpg' 
    ]; 
    $(images).each(function() { 
     var image = $('<img />').attr('src', this); 
    }); 
}