17

画像のソースが変更されたかどうかを検出しようとしています。

私の場合、src は jquery から変更されており、jquery ファイルを変更する権利はありません。そのため、 img 要素から src の変更を検出しようとしています。

テストのためだけに、srcが変更されている場合はソースを確認したい

これは私の現在のコードです:

var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);

ページの読み込みでアラートが反応し、src が表示されますが、jquery からの src の変更では表示されません

4

7 に答える 7

8

あなたはそれを行うことができますが、それはDOMミューテーションイベントを実装する新しいブラウザでのみサポートされます...

divimg.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       // The `src` attribute changed!
    }
});
于 2012-05-18T15:35:01.827 に答える
7

属性が変更されるたびsrcに、ブラウザはすぐにオフになり、画像を取得します。画像がブラウザに返されると、ブラウザはloaded画像要素でイベントをトリガーします。srcしたがって、このイベントにコールバックを設定することで、変更を効果的に監視できます。次のコード例のようなことを行うことができます。

var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");
于 2012-05-18T15:48:20.160 に答える
7

DOMAttrModifiedうまくいくかもしれませんが、それについてはわかりません...しかし、onloadは私にとって間違いなくうまく機能します。これがデモのフィドルです。http://jsfiddle.net/QVqhz/

于 2012-05-18T15:37:11.630 に答える
0

そのためのイベントはないと思います。独自の「イベント」を作成できます。

var divimg = document.getElementById("img_div"),
    prevSrc;
setInterval(function() {
    if (divimg.src != prevSrc) {
        prevSrc = divimg.src;
        onSrcChange();
    }
}, 1000); // 1000ms = 1s

function onSrcChange() {
    // do something
}
于 2012-05-18T15:37:59.703 に答える