divにいくつかのコンテンツを読み込むjQuery ajax関数があります。コンテンツの一部は画像です。私はちょうど私のAJAXにロードされているそれらの画像がロード完了し、コンテンツを表示するなどの機能を実行するまで言いたいと思います。この方法では、私はdivに読み込まれたコンテンツを持っていないし、画像の読み込みを開始します。私はそれらがロードされ、その後、コンテンツを入れてほしい、またはshow() divのコンテンツ。AJAXレスポンスで画像のロードが完了したときを知る
を使用するなど、多くの解決策がありましたが、ajaxを使用して読み込まれたコンテンツでは機能しないようです。
AJAXコールによってロードされているイメージに適用するには、AJAXコールバックにロードハンドラを追加する必要があります。ロードハンドラが適用される前にイメージがロードされる場合は、一定の間隔をおいてコンテンツを表示するようにタイマーを設定することもできます。
$.ajax({
...
success: function(data) {
var imageCount = $(data).filter('img').length;
var imagesLoaded = 0;
$(data).hide()
.appendTo('#someDiv')
.filter('img')
.load(function() {
++imagesLoaded;
if (imagesLoaded >= imageCount) {
$('#someDiv').children().show();
}
});
setTimeout(function() { $('#someDiv').children().show() }, 5000);
}
});
$("img").load()イメージは動的にロードされるため機能しません。そのコマンドは当時のページのイメージにのみ適用されます。
$("img").live("load")を使用して、画像がいつ読み込まれたかを追跡します。
奇数を：
は、あなたは、私が推測することができますから、元のコードに問題があったようimageCount変数は、ノードリストではなく、文字列をカウントしていることを確認する必要があります。私はライブがロードをサポートしていないと言いたいと思いますが、そうではないかもしれませんが、ロードイベントはサポートされているリストまたはサポートされていないリストのいずれにも表示されません。あなたはそれが動作するかどうかを確認するためにこれをテストしましたか？ –
tvanfosson
私が試した：。 $を（ '＃productFullのimg'）（ 'ロード'、機能（）{ 警告（ '！画像が読み込ま'）; \t \t を}）生きます。 しかし、それはうまくいかないようです。これはajax関数の範囲内にある必要がありますか？ –
私はそれをテストしていないし、それがサポートされていないリストにある場合、jQueryが実装するのが難しいため、サポートされていない可能性が高い。 – mahemoff
これはコードtvanfossonの最新バージョンです。
+1 - 私はこのアプローチがとても好きです。 – karim79
私はこの作業に苦労しています。いくつかのjsエラーを取得します。誰かがこれの例を持っていますか？ –
このスクリプトは、私がそれを微調整した後に機能しました...私の投稿を参照してください – bgreater