Preload di Immagini con JavaScript

La lentezza delle connessioni internet comporta anche fastidiosi ritardi nel caricamento d'immagini. Precaricare le immagini con JavaScript è un'ottima soluzione a questo problema, che velocizza il caricamento delle immagini.

Codice per il Preload di Immagini con JavaScript

var preLoadImages = function (imageSrcs) {
	this.images = [];
	this.preload = function (srcs, imgs) {
		var img;
		for (var i = 0; i < srcs.length; i++) {
			img = new Image();
			img.src = srcs[i];
			imgs.push(img);
		}
	};
	this.preload(imageSrcs, images);
};
(function() {
	var imageSrcs = [
		"http://placehold.it/350x150", 
		"http://placehold.it/350x150", 
		"http://placehold.it/350x150", 
		"http://placehold.it/350x150"];
	preLoadImages(imageSrcs);
})();

Pensate al caso di una galleria di immagini con una singola immagine molto grande visibile e le altre immagini visibili attraverso un click del bottone e caricate con una chiamata Ajax. La visualizzazione dell'immagine da parte del browser avra un certo ritardo. Questo è un ottimo caso in cui usare il codice qui sopra.

L'utilizzo del codice è molto semplice, includete la lista di immagini che volte precaricare nell'array imageSrcs e il gioco è fatto. :)