0

次のことを行うコードがいくつかあります。

  1. 外部コンテンツは AJAX 経由で読み込まれます (動画のサムネイル画像)
  2. $("#content").append(); を使用して、新しいコンテンツが div に挿入されます。
  3. モバイル タッチ スクロール ヘルパー (iScroll) がこの div に適用されます。

ただし、AJAX イベントが原因で DOM が変更された場合、jQuery の「ロード」イベントは発生しません。これは、スクローラーを初期化する呼び出しがあまりにも早く (コンテンツ内の画像がロードされる前に) 発生することを意味し、初期化されないことが多いことを意味します。 . 画像が読み込まれるのを待たないと、コンテンツ ボックスはスクロール機能が必要ないほど短いことがよくありますが、その後画像が読み込まれると、ボックスはスクロールできなくなります。 

$("#videoList").append(videoThumbnails);

$(document).load(function () {
  // doesn't fire
  initScroller(); 
});

追加された HTML で参照されているすべての画像が読み込まれるまで、jQuery の追加機能はブロックされないようです。

すべての画像がロードされた後に initScroller() 関数を呼び出すために、AJAX 関数によってロードされたすべての画像のロードが完了したことを検出するにはどうすればよいですか?

4

2 に答える 2

3

OK 別の同様の質問で解決策を見つけました。私が望むことを正確に行うjQueryのwaitForImagesプラグインがあることがわかりました：

だから私はこれを行うことができます：

$("#videoList").waitForImages(function () {
    // Fires when all images in the #videoList div have loaded
    initScroller();
});
于 2012-11-12T15:58:01.713 に答える
2

使用しようとしているメソッドは、ページがロードされたときに 1 回だけトリガーされますが、後で DOM に加えた変更 (たとえば、ajax を使用したコンテンツの挿入) ではトリガーされません。

DOM の変更を観察したい場合は、DOMNodeInserted イベントを使用できます。

$(document).bind("DOMNodeInserted", function(event) {   ....do stuff...here     });

ただし、一般的には ajax コールバックでこれをトリガーする方がよいでしょう。

$('#targetElementForYourContent').load('server/url.html', function() {
     ...do stuff here....
});
于 2012-11-12T15:36:42.787 に答える