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

你可以用这样的css预加载图像： -

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

Answer 2

对于下一个问题，您确实应该粘贴更多代码，这样可以更轻松地为您提供帮助。我检查了您提供的网址，但对于可能遇到同样问题的其他人来说，很难理解出现了什么问题......

好吧，正如我所说，你总是在悬停状态下再次要求他拍照... 这对我有用：

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

...只给出身份......

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

像这样，你可以对图像进行操作，而不是一次又一次地调用它们...... 我希望它有所帮助。

图像未正确预装

2 个答案: