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.

Answer 1

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.