23

できるだけ多くのブラウザにこれを実装する方法を探しています:

var image = new Image();
image.addEventListener("load", function() {
    alert("loaded");
}, false);
image.src = "image_url.jpg";

これは IE では機能しなかったので、Google で検索したところ、9 未満の IE はサポートされていないことがわかりました.addEventListener()。と呼ばれる jQuery に相当するものがあることは知っていますが.bind()、Image(). これをIEでも機能させるには、何を変更する必要がありますか?

4

5 に答える 5

30

IE は代わりに attachEvent をサポートします。

image.attachEvent("onload", function() {
    // ...
});

jQueryを使用すると、次のように書くことができます

$(image).load(function() {
    // ...
});

イベントに関しては、jQuery を使用できる可能性がある場合は、jQuery を使用することをお勧めします。jQuery を使用すると、ブラウザーの互換性が確保されます。コードはすべての主要なブラウザで動作するので、心配する必要はありません。

また、ロード イベントが IE で発生するようにするには、画像がキャッシュから読み込まれないようにする必要があります。そうしないと、IE はロード イベントを発生させません。

これを行うには、次のように、画像の URL の末尾にダミー変数を追加します。

image.setAttribute( 'src', image.getAttribute('src') + '?v=' + Math.random() );

jQuery ロード メソッドを使用する既知の問題には、次のものがあります。

画像で使用する場合の load イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

  • クロスブラウザで一貫して確実に動作しない
  • 画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません。
  • DOM ツリーを正しくバブルアップしない
  • ブラウザのキャッシュに既に存在する画像の起動を停止することができます

詳細については、jQuery のドキュメントを参照してください。

于 2011-09-16T09:47:04.103 に答える
8

.attachEvent()ではなく使用する必要があり.addEventListener()ます。

if (image.addEventListener) {
  image.addEventListener('load', function() {
       /* do stuff */ 
  });
} else {
  // it's IE!
  image.attachEvent('onload', function() {
    /* do stuff */
  });
}
于 2011-09-16T09:46:20.777 に答える
2

new Image基本的にはタグを返すので、http: //jsfiddle.net/pimvdb/LAuUR/1/<img>のように jQuery でコーディングできます。

$("<img>", { src: '...' })
    .bind('load', function() {
        alert('yay');
    });

編集：有効な画像をロードする場合

$('.buttons').html('');

var range = [];
for (var i = 1; i <=50; i++) range.push(i);

range.forEach(function(i) {
  var img_src = 'http://i.imgur.com/' + i + '.jpg';
  var $img = $("<img>", {
    src: img_src
  });

  $img.on('load', function() {
    $('.buttons').append($img);
  });

  $img.on('error', function() {
  });

});
于 2011-09-16T09:46:40.870 に答える
2

を使用できますが、リスナーを自分attachEventで追加することをお勧めします。addEventListenerイベントリスナーを追加するための MDN リンクのコードは次のとおりです。

if (!Element.prototype.addEventListener) {
    var oListeners = {};
    function runListeners(oEvent) {
        if (!oEvent) { oEvent = window.event; }
        for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
            if (oEvtListeners.aEls[iElId] === this) {
                for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
                break;
            }
        }
    }
    Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
        if (oListeners.hasOwnProperty(sEventType)) {
            var oEvtListeners = oListeners[sEventType];
            for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
                if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
            }
            if (nElIdx === -1) {
                oEvtListeners.aEls.push(this);
                oEvtListeners.aEvts.push([fListener]);
                this["on" + sEventType] = runListeners;
            } else {
                var aElListeners = oEvtListeners.aEvts[nElIdx];
                if (this["on" + sEventType] !== runListeners) {
                    aElListeners.splice(0);
                    this["on" + sEventType] = runListeners;
                }
                for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
                    if (aElListeners[iLstId] === fListener) { return; }
                }           
                aElListeners.push(fListener);
            }
        } else {
            oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
            this["on" + sEventType] = runListeners;
        }
    };
    Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
        if (!oListeners.hasOwnProperty(sEventType)) { return; }
        var oEvtListeners = oListeners[sEventType];
        for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
            if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
        }
        if (nElIdx === -1) { return; }
        for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
            if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
        }
    };
}
于 2011-09-16T09:48:52.227 に答える
1

これを実行する最善の方法は、おそらく、jQuery の組み込みまたはプレーンな JSの代わりに、jQuery と jQuery プラグインimagesLoadedを使用することです。load()プラグインは、jQuery ドキュメントが参照するさまざまなブラウザーの癖、つまり、キャッシュされた画像に関して、新しい画像srcが同じ場合にコールバックを再起動する処理を行います。jquery.imagesloaded.min.jsをダウンロードして追加するだけで、準備完了<script src="jquery.imagesloaded.min.js"></script>です。

$(image).imagesLoaded(function() {
    alert("loaded");
});
于 2013-01-12T06:48:59.077 に答える