Preloading images not working in Firefox?

Question

I am preloading images like so:

$(function() {
window.onload = function() {

// Preloading colorized hover images
var bildliste_color = new Array();
var j;
for (j = 0; j < 14; j++)    { 
    bildliste_color[j] = "images/works/work_art/middle/work_middle_art" + (j+1) + ".png";
}

var image_color = new Array();
for (j=0; j < bildliste_color.length; j++) {
        image_color[j] = new Image();
        image_color[j].src = bildliste_color[j];
}


// Preloading work_art_large_images
var bildliste_large = new Array();
var i;
for (i = 0; i < 14; i++) {
        bildliste_large[i] = "images/works/work_art/large/work_large_art" + (i+1) + ".png";
        console.log(i);
        console.log(bildliste_large[i]);

}
var image_large = new Array();
for (i=0; i < bildliste_large.length; i++) {
    image_large[i] = new Image();
        image_large[i].src = bildliste_large[i];
}
}



});

I am preloading those images so that these are being cached and not being dowloaded again, when they are needed on hover.I achieved that with the jquery hover function like so:

$(document).ready(function() { 
$("#incontent_work_art img").hover(function() {
    oldsrc = $(this).attr("src"); 
    var newsrc = $(this).attr("src").replace("images/works/work_art/middle/work_middle_art01sepia.png", "images/works/work_art/middle/work_middle_art1.png"); 
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art02sepia.png", "images/works/work_art/middle/work_middle_art2.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art03sepia.png", "images/works/work_art/middle/work_middle_art3.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art04sepia.png", "images/works/work_art/middle/work_middle_art4.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art05sepia.png", "images/works/work_art/middle/work_middle_art5.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art06sepia.png", "images/works/work_art/middle/work_middle_art6.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art07sepia.png", "images/works/work_art/middle/work_middle_art7.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art08sepia.png", "images/works/work_art/middle/work_middle_art8.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art09sepia.png", "images/works/work_art/middle/work_middle_art9.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art10sepia.png", "images/works/work_art/middle/work_middle_art10.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art11sepia.png", "images/works/work_art/middle/work_middle_art11.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art12sepia.png", "images/works/work_art/middle/work_middle_art12.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art13sepia.png", "images/works/work_art/middle/work_middle_art13.png");
    newsrc = newsrc.replace("images/works/work_art/middle/work_middle_art14sepia.png", "images/works/work_art/middle/work_middle_art14.png");


        $(this).attr("src", newsrc);

    }, function() { 
        $(this).attr("src", oldsrc); 
});
});

This is for sure not the best code in the world but I am still learning. The current problem is that if I hover over an image it most of the time gets downloaded again by firefox. Even though I can see that all images were being downloaded by firefox previously. Sometimes the images are being loaded from the cache by firefox but it seems that after some amount of time the image is being downloaded again. I tested this also with opera und Chromium and it works well there. So why is Firefox downloading the image again and again and again? I want them to be cached!

I'd appreciate any good advice.

EDIT: It also works in IE. Could it possibly be that the problem is being caused because the preloaded images are not being added to the window.document.images array? In essence not in the DOM? My problem seems to be a bit if not fully related to this:

Image preloading isn't working for images in FireFox

But unfortunately no solutions were given.

score 0 · Accepted Answer · answered Apr 17 '14 at 12:53

0

Since you completely replace the old URLs by new ones, the garbage collector may decide to free memory because it doesn't know whether you'll use them again. You can't really assume how Firefox works (nor IE nor any other browser). Your best bet would be to have both sets of images in the web page at the same time and use the stylesheet display:none to select which set you don't want to show.

answered Apr 17 '14 at 12:53

vdavid

2,434
1
14
15

Well, the problem I have with that (correct me if I am wrong) is that by this method all the images would be downloaded even though they are really not needed at the moment. That would also mean that it would take much more time to display the page because all the assets which are needed now and those assets (hover images) that are needed later are downloaded at the same time. I would like to display the page first and then download the hover images. That's why I used the javascript onload method. – user3542317 Apr 17 '14 at 13:19
You could also display the images you don't need at start when the even occurs. Basically you have this: http://jsfiddle.net/6HeyT/2/ and I suggest this: http://jsfiddle.net/dUYX9/4/ – vdavid Apr 17 '14 at 13:51
Ah. I see. Why couldn't I think of that?! Thanks. I also accept your first reply as an answer because although there is no solution it seems that there is no real solution to the problem and that's the solution as far as I understand. – user3542317 Apr 17 '14 at 14:32
My testing shows that Firefox (version 47) ignores them if display:none is used on the image. I ended up enclosing the images in a DIV to hide them. – Milan Babuškov Jun 14 '16 at 14:10

Preloading images not working in Firefox?

1 Answers1