What can I do to get Mozilla Firefox to preload the eventual image result?

Question

I am attempting to preload images using JavaScript. I have declared an array as follows with image links from different places:

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[1] = new Image();
imageArray[2] = new Image();
imageArray[3] = new Image();
imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg";
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg";
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg";
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg";

The image fade and transformation effects that I am doing using this array work properly for the first 3 images, but for the last one, imageArray[3], the actual image data of the image does not get preloaded and it completely ruins the effect, since the actual image data loads AFTERWARDS, only at the time it needs to be displayed, it seems.

This happens because the last link http://www.iill.net/wp-content/uploads/images/hot-chick.jpg is not a direct link to the image. If you go to that link, your browser will redirect you to the ACTUAL location. Now, my image preloading code in Chrome works perfectly well, and the effects look great. Because it seems that Chrome preloads the actual data - the EVENTUAL image that is to be shown. This means that in Chrome if I preloaded an image that will redirect to 'stop stealing my bandwidth', then the image that gets preloaded is 'stop stealing my bandwidth'.

How can I modify my code to get Firefox to behave the same way?

Answer 1

Why don't you put an image on the page with no source, and hide it:

<img src='' id='preLoadImage1' style='display: none' />

Now, in your Javascript, load the image:

document.getElementById('preLoadImage1').src = '';

Then you can place this img inside the div later.

Answer 2

I think you are on the wrong side of this issue~ Whatever method you employ may eventually be countered by the host of the image. Why not save a copy to a host you control?

That said, you could try

<img src="hotlink" style="visibility:hidden;position:absolute;margin-top:-1000px;" />

That may get FireFox to cache the image.

Answer 3

I'd suggest using a ul with child li elements that contain the relevant images. Style the ul with display: none (or, alternatively, position: absolute it off the page) and the images should still be loaded by the browser, regardless of their being, essentially, invisible to the user.

A slightly messy way of doing that, with your current code, is illustrated at JS Fiddle, the relevant JS below:

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[1] = new Image();
imageArray[2] = new Image();
imageArray[3] = new Image();

imageArray[0].src = "http://www.bollywoodhott.com/wp-content/uploads/2008/12/arjun-rampal.jpg";
imageArray[1].src = "http://labelleetleblog.files.wordpress.com/2009/06/josie-maran.jpg";
imageArray[2].src = "http://1.bp.blogspot.com/_22EXDJCJp3s/SxbIcZHTHTI/AAAAAAAAIXc/fkaDiOKjd-I/s400/black-male-model.jpg";
imageArray[3].src = "http://www.iill.net/wp-content/uploads/images/hot-chick.jpg";

// the below stuff is the new:

var newList = document.createElement('ul');
newList.setAttribute('id', 'imgPreload');

var preload = document.getElementById('preload');
preload.appendChild(newList);
var imgPreload = document.getElementById('imgPreload');

var li = document.createElement('li');

for(i=0; i<imageArray.length; i++){
    imgPreload.appendChild(li).appendChild(imageArray[i]);
}

Obviously the above doesn't hide the created ul, but the demo's to show one way of going about creating it dynamically. Admittedly, also, I've only so far tested it in Chrome.