1

画像付きのコンテナがあります

<div class='container'>
    <img src='...' />
    <img src='...' />
    <img src='...' />
</div>

画像は動的に読み込まれます。次のように、クロスブラウザー (IE7+) の onLoad イベントを「jQuery-on」のようなスタイルでバインドする方法はありますか (疑似コード):

$(element).one('load', 'img', function () {
    // my callback
}).each(function () {
    if (this.complete || image.naturalWidth > 0) $(this).load();
});
4

1 に答える 1

0

この場合、イメージ ロード イベントはバブリングしないため、コンテナーにイベント ハンドラーをアタッチしても機能しません。(仕様書をよく読んでいる方向けに説明すると、HTML 仕様書では、画像読み込みイベントは「単純なイベント」であり、バブルしないタイプのイベントであると書かれています。)

代わりに、次のように、動的にロードされる各イメージにハンドラーを個別にアタッチする必要があります。

// Add an image dynamically
$("<img/>")

    // Attach the load handler individually to each image being loaded
    .load(onLoad)

    .attr("src", "http://placekitten.com/" + width + "/" + height)
    .appendTo($(".container"));

機能例: http://jsfiddle.net/dmillz/ZmFfv/

于 2013-08-05T16:24:28.807 に答える