Images not preloaded properly

Question

I am having a jQuery script that loads 15 images and their hover versions (the hover versions are used when... hovering, not when the page loads). In both Chrome and Firefox in the Network tab, i see this :

images/img1.png
images_hover/img1.png

This must mean the hover images are preloaded correctly, but... when i actually hover and those images are used, they are being loaded again. Here is the preload code :

var prel = new Image();
prel.src = "http://hdodov.byethost15.com/color-game/graphics/parts_hover/" + id + ".png";

I tried using the whole path - http://hdodov.byethost15.com/color-game/graphics/parts_hover/ and the short path too (where the root and the script is) - graphics/parts_hover/. It made no difference.

Could this be caused because my images have the same name? They are in different directories though.

You might want to read this: http://stackoverflow.com/questions/476679/preloading-images-with-jquery — naota, Jul 18 '14 at 11:32
Maybe you overwrite `prel`, resulting in only the last image being preloaded ? Try to do `newImage().src = "your_url"` — singe3, Jul 18 '14 at 11:33

score 1 · Answer 1 · answered Jul 18 '14 at 11:24

1

Yuo can preload images with css like this:-

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

answered Jul 18 '14 at 11:24

raw_orb

183
1
12

Why use CSS when i am already using jQuery (and it's easier with it)? It's a good alternative though. Will probably do it this way if things don't work out. – dodov Jul 18 '14 at 11:54

reyaner · Accepted Answer · 2014-07-18T13:01:09.333

For the next question, you really should paste more code, which makes it easier to help you. I checked your URL you provided, but for other people that might have the same problem, it will be hard to understand what went wrong...

OK, as I said, you are always requesting he images again on hover state... This worked for me:

var context = new Array(15),
    canvas = new Array(15),
    canvasNum = -1,
    hElem,
    hElemPrev,
    mousePos = {x:-1, y:-1},
    images = [], //<-- Store preloaded images here
    imagesHover = []; //<-- Store preloaded images here

... then save them on building like this:

function drawMenuItems(id, width, height){
    var canNumHolder, createCanvas;
    $('#canvas_holder').append($('<canvas></canvas>')
        .attr({
            width:width,
            height:height,
            id:id
        })
    );

    canvasNum++;
    canvas[canvasNum] = document.getElementById(id);
    context[canvasNum] = canvas[canvasNum].getContext('2d');
    canNumHolder = canvasNum;

    images[id].crossOrigin = 'Anonymous';
    images[id].onload = function(){
      context[canNumHolder].drawImage(images[id],0,0);
    };
    images[id].src = 'graphics/parts/' + id + '.png';

    //Hover states
    imagesHover[id] = new Image();
    imagesHover[id].src = "graphics/parts_hover/" + id + ".png";
}

... give just the id...

function hoverStateChange() {
    //....rest of the code
    if(hElem >= 0){
        drawImageOnCanvas(
            canvas[hElem],
            context[hElem], 
            "hover", //pass somethink to checke what you want to do
            $(canvas[hElem]).attr('id')
        );

     //....rest of the code
    //change to normal texture
    if(hElemPrev >= 0){
        drawImageOnCanvas(
            canvas[hElemPrev],
            context[hElemPrev],
            "", //pass empty for other state
            $(canvas[hElemPrev]).attr('id')
        );
        $(canvas[hElemPrev]).removeClass('active');
        $('#text_holder').removeClass('a' + hElemPrev);
    }

.. and finally

function drawImageOnCanvas(canv, contxt, state, src){
    contxt.clearRect(0,0,400,400);
    if(state == "hover"){
        contxt.drawImage(imagesHover[src],0,0);
    }else {
        contxt.drawImage(images[src],0,0);
    }
}

Like this, you chache you images and not calling them again and again... I hope it helps.

Doesn't do the job. It even makes it worse - images are not preloaded and on unhover, the images are not changed with their "unhover" versions. — dodov, Jul 18 '14 at 11:52
Oh my god......... exactly after i posted my comment, i did this. Exactly this! Even the array names were the same... However, something went wrong and i didn't managed to make it this way. I'll try again. Perhaps i made a minor mistake. Anyway, thanks! :) — dodov, Jul 19 '14 at 12:03

Images not preloaded properly

2 Answers2