preloading images not working in firefox

[littleark]

Hi everybody,

I have a typical javascript images preloader, it works fine both on
Firefox and on IE in my intranet (local server).
It works fine on the Internet (remote server) in IE.

In Firefox it stops before loading every image.

Does image.onload function have some problems with little images?

Any ideas? I suppose there's another post with the same topic, if so
could you please give me the link?

Thank you in advance,
carlo

This is the function:

// images is an array of images name
function preloadImages(images) {
var imgPreload=new Array();
var total=images.length;
var now=0;

for(i=0;i<images.length;i++) {

imgPreload=new Image();
imgPreload.onload=function() {
now++;
if (now==total)
alert("OK!");
}
imgPreload.src = images;
};
}

 

[Ian Collins]

Hi everybody,

I have a typical javascript images preloader, it works fine both on
Firefox and on IE in my intranet (local server).
It works fine on the Internet (remote server) in IE.

In Firefox it stops before loading every image.

Are you seeing the difference in the way IE and FF cache images? What
happens if you clear the cache in FF?

 

[RobG]

Hi everybody,

I have a typical javascript images preloader, it works fine both on
Firefox and on IE in my intranet (local server).
It works fine on the Internet (remote server) in IE.

In Firefox it stops before loading every image.

Does image.onload function have some problems with little images?

Any ideas? I suppose there's another post with the same topic, if so
could you please give me the link?

Thank you in advance,
carlo

This is the function:

// images is an array of images name

I'm not sure that's a good name for a variable as there is a
document.images collection already - it might get confusing for someone
maintaining your code.

function preloadImages(images) {
var imgPreload=new Array();

Usually a global variable is used so that it persists after the
function has finished (see below).

var total=images.length;
var now=0;

for(i=0;i<images.length;i++) {

Variables like "i" should be kept local using the var keyword unless
there is a good reason to make them global:

for(var i=0; i<images.length; i++) {

imgPreload=new Image();
imgPreload.onload=function() {
now++;
if (now==total)
alert("OK!");
}
imgPreload.src = images;
};
}

Typically your function will finish running well before the images have
finished loading. At that point, any local variables (including the
images array) will be available for garbage collection. It is very
likely that when you use this over the internet, the images haven't all
finished loading when the function ends so some never do.

When used locally, the images load faster and get to complete - the
simple solution is to make your images array global.

If this is just for small menu images, consider using CSS rollovers,
then you don't need any pre-loading (or even script support).

 

[littleark]

Ok, thanks for the answers.

First of all let me tell you that the page I'm preloading the images
for is in a new window (kind of popup) and there my preloader stops
before loading everything, instad if I call the page directly in
Firefox (without popping out the window) this script works fine.

Then, thanks to your advices, I've changed the variable name from
"images" to "myImages" and I've set the "i" variable as local.

And still didn't work fine.

Finally I've changed the imgPreload array from local to global and
suddeny evertyhing worked out. So yep I suppose it was something
relates to garbage collector as you told.

This is not a rollover-images preloader, I want to preload many images
(kind of big ones) in an horizontal-scrolling layout, so I want to
prevent my users from scrolling to not fully loaded sections.

Thank you.
Bye
carlo