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 に答える