What you are facing is the classic image loading issue.
I think the following code should help you, I found it sometime ago it
is based on this page :
Basically, you need to have
When you want to load your big images you call these two lines:
$(‘waitingPic’).show()
initPics()
Here’s the code
function initPics(){
var ImagePreLoader = Class.create({
callback: null,
imageCache: new Array,
loaded: 0,
processed: 0,
noOfImages: 0,
initialize: function(images, options) {
if (options) {
if (options.callback) this.callback = options.callback;
}
this.noOfImages = images.length;
for ( var i = 0; i < images.length; i++ )
this.preload(images[i]);
},
preload: function(imgSrc) {
var image = new Image;
this.imageCache.push(image);
Event.observe(image, 'load',
this.onload.bindAsEventListener(this), false);
Event.observe(image, ‘error’,
this.onerror.bindAsEventListener(this), false);
Event.observe(image, ‘abort’,
this.onabort.bindAsEventListener(this), false);
image.preloader = this;
image.loaded = false;
image.src = imgSrc;
},
onComplete: function() {
this.processed++;
if (this.processed==this.noOfImages) {
this.callback(this.imageCache, this.loaded);
}
},
onload: function(e) {
this.loaded++;
this.onComplete();
},
onerror: function(e) {
this.onComplete();
},
onabort: function(e) {
this.onComplete();
}
});
var imgPreloadCallback = function(imageCache, loaded) {
// where:
// imageCache is an array of the loaded images
// loaded is an int of the number of images that loaded.
//doSomethingAfterImagesAreLoaded();
$(‘waitingPic’).hide();
picsPreLoaded = true;
}
var imgLoader = new
ImagePreLoader(picSrc,{callback:imgPreloadCallback});
}
Hope this helps.
Christophe
Le 11 mars 2010 à 16:40, Guille S. a écrit :