图片未正确预加载

Question

我有一个 jQuery 脚本，它可以加载 15 个图像及其悬停版本（悬停版本在...悬停时使用，而不是在页面加载时使用）。在“网络”选项卡的 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);
    }
}

像这样，你会搜索你的图像，而不是一次又一次地调用它们...... 希望对你有帮助。

Answer 2

Yo 可以像这样使用 css 预加载图像：-

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