2

イメージのsrcを動的に変更していて、そのイメージのロードイベントでキャプチャしたいと思います。私がそれを行う方法はありますか？

4

2 に答える 2

5

数年前、2 回目の設定時に、一部のブラウザー (どのブラウザーかは覚えていません) で onload イベントが信頼できないことを発見しまし.srcた。そのため、画像オブジェクトを置き換えることにしました。新しい画像オブジェクトを作成し、onload ハンドラーを設定し、.src値を設定してから、読み込み時に既存の画像の代わりにページに挿入します。

JavaScript でゼロから画像を作成する場合は、次のようにします。

var img = new Image();
img.onload = function() {
    // put your onload code here
};
img.src = "xxx.jpg"

画像の を変更したいだけの場合.srcは、ページで DOM オブジェクトを見つけて、その.srcプロパティを設定するだけです。

var img = document.getElementById("myImage");
img.src = "xxx.jpg";

をリセットするときに onload イベントをキャプチャしたい場合.src(数年前に信頼性の問題があった場合は、次のようにします。

var img = document.getElementById("myImage");
img.onload = function() {
    // your code here
};
img.src = "xxx.jpg";

新しい画像を読み込み、読み込み時に既存の画像を置き換える場合は、次のようにします。

function replaceImg(oldImage, newSrc) {
    var img = new Image();
    img.onload = function() {
        var parent = oldImage.parentNode;
        parent.insertBefore(img, oldImage);
        parent.removeChild(oldImage);
        // put any other code you want here when the 
        // replacement image is loaded and in place
    };
    img.src = newSrc;
}

そして、これを次のように呼び出します。

<img id="myImage" src="yyy.jpg">


var oldImage = document.getElementById("myImage");
replaceImg(oldImage, "xxx.jpg");
于 2012-08-30T21:29:21.463 に答える
0 
// create image object
var image = new Image();
image.onload = function () { 
    // do stuff 

    $('#myimageelementid').prop('src', image.src); // set the element in the DOM with this image
}


image.src = "image.jpg"; // will trigger onload when loaded
于 2012-08-30T21:24:45.623 に答える