1

AJAXを介してコンテンツをロードするページがあります。このコンテンツの中にはいくつかの画像があります。画像のサイズ（さまざまです）に応じてページレイアウトをフォーマットする必要がありますが、サイズを取得するには、コードを実行する前に、まず画像の読み込みを完了する必要があります。それが通常のページにあった場合（通常はAJAXなしでコンテンツをロードする）、私がしなければならないのは$(window).load()関数を使用することだけですが、AJAXでは何らかの理由でトリガーされません。これに対する回避策が必要です。AJAXを介してロードされた画像のロードが完了した後にコードを実行する方法です。

基本的に、これは私がやろうとしていることです

ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
document.getElementById("results").innerHTML=ajaxRequest.responseText;
//the responseText includes images among other information to be loaded 
$(window).load(function() {
...some code
});}}

しかし、$(window).load()決して起動せず、すべての画像の読み込みが完了したらコードを実行する必要があるため、すべての画像に読み込みイベントをバインドすることは実際にはオプションではありません。

最初の質問に関連して類似している別の質問があり$(document).readyます。コンテンツがAJAXを介してロードされた後も、jQueryが起動しないようです。今は必要ありませんが、将来的には確実に必要になるので、これに対する回避策もありますか？

本当にありがとうございました。

4

3 に答える 3

3

$（window）.loadは、ページの初期読み込みに対してのみ機能します。

私が見る唯一のクリーンな解決策は、画像を数え（それらが唯一の問題であることを願って）、それらがロードされるのを待つことです：

$('#results').load('youurl', function() {
    var $images = $('#contenu img');
    var count = $images.length;
    console.log('initial images count : ', count);
    var decrement = function() {
        if (--count==0) {
            console.log('All images loaded');
            // do something                 
        }
    };
    $images.each(function(){
       if (this.complete) {
           decrement();
       } else {
           this.onload = function(){
                decrement();
           };
       }
    });
});

これは現在、このサイトでテスト可能です。レシピのリンクをクリックして、コンソールを確認してください。

于 2012-06-24T17:07:15.243 に答える
3

あなたが望むのはimagesLoadedプラグインだと思います。AJAX 経由でマークアップを読み込んだ後、この div 内の画像を選択して呼び出し.imagesLoaded()ます。

$('.article img').imagesLoaded( myCallbackFunction );
于 2012-06-24T17:09:40.913 に答える
0

その上、XMLHttpRequest を使用します... JQuery を使用すると、はるかに簡単になります。投稿したすべてのコードを削除して、次のようにするだけです。

$("#results").load("ajaxpage.php", function() { ... some code... });

あなたが必要とするすべてです。ウィンドウがロードされたときに何らかのコードを起動する必要がある場合は、$(window).load() を使用します。ajax リクエストの後にコードを起動する必要がある場合は、上記のコールバック function() に入れるだけです

于 2012-06-24T17:09:11.717 に答える