2

我正在尝试使用 javascript 预加载图像：

$(document).ready(function () {
    preloadImages(
        ['../../Content/Resources/close_mouse_over.png',
        '../../Content/Resources/close.png']);
});

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i];
        }
    }

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }

在 HTML 中：

<input type="image" src="../../Content/Resources/close.png" name="Action" value="Save" onmouseover="mouseOverForImage('close', '../../Content/Resources/close_mouse_over.png')" 
               onmouseout = "mouseOverForImage('close', '../../Content/Resources/close.png')" id="close" title = "Close" />

但是鼠标悬停后请求仍在发送到服务器。不仅在 chrome 中工作

4

1 回答 1

1

正如我在评论中所指出的，您将数组数组传递给 preLoadImages 方法。

结果，您传递了一个数组，image[i].src这意味着它不会被加载。

尝试

$(document).ready(function () {
    preloadImages(
        ['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']);
});

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i];
        }
    }

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }

或者，如果您想保留数组的数组，则使用

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i][0];
        }
    }

编辑，在进一步调查中，一个可能的原因是在预加载图像后preloadImages破坏了image阵列。

试试这个：

function preloadImages(sources) {
    window.preloadedImages = new Array();
    for (var i = 0; i < sources.length; i++) {
        window.preloadedImages[i] = new Image();
        window.preloadedImages[i].src = sources[i];
    }
}

这会将预加载的图像存储在窗口对象中，从而允许它们正确地预加载。

希望有帮助吗？

于 2012-05-21T09:22:54.267 回答