javascript - 图像未正确预加载

Question

我有一个加载 15 个图像及其悬停版本的 jQuery 脚本(悬停版本在...悬停时使用，而不是在页面加载时使用)。在网络选项卡的 Chrome 和 Firefox 中，我看到了这个:

images/img1.png
images_hover/img1.png

这一定意味着悬停图像已正确预加载，但是...当我实际悬停并使用这些图像时，它们将再次加载。这是预加载代码:

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

我尝试使用整个路径 - http://hdodov.byethost15.com/color-game/graphics/parts_hover/以及短路径(根目录和脚本所在的位置)- graphics/parts_hover/。没有区别。

会不会是我的图片重名导致的？但是它们位于不同的目录中。

Answer 1

下一个问题，你真的应该多贴一些代码，这样更容易帮助到你。我检查了你提供的网址，但对于其他可能有同样问题的人来说，很难理解哪里出了问题......

---

好的，正如我所说，您总是在悬停状态下再次请求他的图像...这对我有用:

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

...然后像这样保存它们:

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";
}

...只给出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);
    }

.. 最后

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);
    }
}

像这样，你可以检查你的图像，而不是一次又一次地调用它们......希望对您有所帮助。