3

この例ではdiv#add、ボタンをクリックしたときに要素内に動的な画像を作成する次のコードを取得できますが、のロード イベントはimg機能しません。

 <html>
 <head>
 <title>None!</title>
<script type="text/javascript" src="Scripts\jquery-1.6.2.min.js"></script>
 </head>                                                                 
 <body>
    <button id="click">Click</button>
 <div id="add"></div>

 <script>
    $(document).ready(function(){
        $('#click').click(function() {
            $('div#add').append('<img src="./images/imagename.jpg" />');
        });

        $('img').bind('load',function(){
            alert('test');
        });
    });
 </script>

 </body>                                                                 
 </html>

onloadまた、動的にイベントを設定しようとしましたimgが、イベントが発生しませんでした。どんな助けでも大歓迎です。

更新 (2011-10-24 18:55 EST) : Load-Event のJQuery ドキュメントには次のように記載されているようです。

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

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

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

load イベントの使用は、フェイル セーフのクロス ブラウザー ソリューションではないと思います。

更新 (2011-10-28 15:05 EST) : @Alex のおかげで、彼のwaitForImagesプラグインを使用してリスナーを作成することができました (それが正しい用語かどうかはわかりません)。読み込まれました。

<html>
<head>
<title>None!</title>
<script type="text/javascript" src="Scripts\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scripts\jquery.waitforimages.js"></script>
</head>                                                          
<body>

<button id="click">Click</button>
<div id="add"></div>


<script>
$(document).ready(function(){
    setInterval(function(){
        $('div#add img.art').waitForImages(function() {
            $('div#add img.load').hide();
            $(this).show();
        });
    }, 500);

    $('#click').click(function() {
        $('div#add').append('<img class="load" src="./images/loading.gif" /><img style="display:none;" width="199" class="art" src="./images/imagename.jpg" /><br />');
    });
});
</script>

</body>                                                                 
</html>

そのため、現在、画像が読み込まれたかどうかを判断するのに最大 500 ミリ秒の遅延があります。これは合理的に思えますか？これは、動的に作成された img タグが読み込まれたかどうかを確認する最良の方法ですか?

素晴らしい:setIntervalすべての画像が読み込まれた後、関数のトリガーを停止する必要があります。私はまだその詳細を解決する必要があります。

4

1 に答える 1

3

それに応じて引数を変更bind()し、再調整します。on()

単純bind()にすると、DOM 内のすべての要素にバインドされます。を使用するon()と、共通の祖先にバブリングしているイベントが検索され、その発生元がチェックされ、関連付けられているイベントが発生します。

これは、将来のすべてのimg要素を処理することを意味します。

于 2011-10-24T00:44:42.797 に答える