6

簡単な$(element).load(url, callback);ことをしてajaxリクエストを行った後、画像などを含む新しいコンテンツがページに表示されます。

$(window).load(callback)新しいコンテンツの読み込みが完了した後と同様のことを行う方法はありますか？

$(window).load();ページが新鮮な場合はうまく機能するため、すべてのコンテンツが読み込まれるまで読み込みアニメーションを表示できますが、コンテンツが$(window).load()既にトリガーされた後にコンテンツが読み込まれる場合は、このような単純なものが欠落しているようです。

編集6/6/1211:55pm：誰もが私の質問を誤解していると思います。もう少し詳しく説明しましょう。

$(document).ready();最初にページをロードするときに、jQuery：とでこれら2つのイベントを利用できます$(window).load();。1つ目は、DOMの準備ができたときに発生し、2つ目は、コンテンツ（画像など）の読み込みが完了したときに発生します。jQueryのメソッドを使用してページを更新した.load()後、Ajaxの完了後に実行されるコールバックを渡すことができることを十分に認識しています。

それは私が望んでいることではありません。ページの最初のコンテンツの読み込みが完了した後に起動する場合と同様に、新しいコンテンツの読み込みが完了した後に関数を実行したいと思います。$(window).load();

それは理にかなっていますか？$(window).load();Ajaxのコンテンツの読み込みが完了した後（HTMLが挿入された直後だけでなく）に何かを行うのと同様のイベントを作成するにはどうすればよいですか？

4

5 に答える 5

4

jQueryによると：

load イベントは、要素とすべてのサブ要素が完全に読み込まれると、要素に送信されます。このイベントは、URL に関連付けられた任意の要素 (画像、スクリプト、フレーム、iframe、および window オブジェクト) に送信できます。

したがって、DOM が更新された後 (たとえば、Ajax のコンテンツを使用して)、新しく挿入されたすべての画像で「読み込み」イベントのリスナーを設定しています。

function when_images_loaded($img_container, callback) { // do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target.
    var _imgs = $img_container.find('img'),
        img_length = _imgs.length,
        img_load_cntr = 0;

    if (img_length) { //if the $img_container contains new images.
        _imgs.on('load', function() { //then we avoid the callback until images are loaded
            img_load_cntr++;
            if (img_load_cntr == img_length) {
                callback();
            }
        });
    }
    else { //otherwise just do the main callback action if there's no images in $img_container.
        callback();
    }
}

これは、画像の準備が整うまでコンテンツを非表示のままにしておくのに便利です。背景画像として表示される背景画像がある場合、これは機能しません。回避策は、CSS スタイルで使用しているすべての画像を非表示のままのコンテナにロードして、上記の関数で画像をロードできるようにすることです。すべての画像が読み込まれたら、CSS のみの画像を含む要素を削除できます。これにより、コンテンツを再表示したときにブラウザーが背景 (など) を即座にレンダリングします。

于 2012-06-12T07:34:26.123 に答える
1 
$(element).load(url, function(){
  //this code is executed after the page is loaded
})

これはどういう意味ですか？

于 2012-06-06T05:31:17.687 に答える
1

数日前にこの問題に出くわし、その時の質問への回答を使用しましたが、その後、将来他の人に役立つかもしれないimagesLoadedプラグインに出くわしました。

于 2016-04-27T21:33:55.973 に答える
1

すべての ajax 完了イベントを処理するためのグローバルなアプローチを探しているようです。このようにできます。

$(document).ready(function () {
    $(document).ajaxComplete(function () { alert('ajax completed.') });
    $('#d').load("url-to-page", function (response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            alert(msg + xhr.status + " " + xhr.statusText);
        }
    });
});
于 2012-06-06T05:58:18.733 に答える
0

私はあなたがしなかったと思います。単に、ajaxが完了した後に実行される成功ajaxイベントをトリガーする必要があります。それはあなたにとって十分です。ajaxによって返される特定の要素に.load（）のようなイベントは必要ありません。ただし、サーバーからhtmlが返された後、DOMに挿入される前のように、load（）イベントを要素にアタッチすることはできます。

于 2012-06-06T05:26:21.703 に答える