web-dev-qa-db-ja.com

jQuery Ajaxはすべての画像がロードされるまで待機します

うまく機能しているjQueryでAjax呼び出しを実行しようとしています。成功イベントを使用してデータを表示します。ただし、外部HTMLファイルがロードされるとすぐに成功がトリガーされるようです。大きな画像がある場合は、表示された後も読み込み続けます。すべてが完全に読み込まれた後にコンテンツを表示する方法はありますか？コードは次のとおりです。

$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>');
$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
          $('#divajax').html(data);
    }
});
jqueryajaxloading
37
robs

@alexが書いたプラグインは、何らかの理由で機能しませんでした...理由がわかりませんでした。しかし、彼のコードは、私のために働いている、より軽量なソリューションを思いつくように私を奮い立たせました。 jquery promiseを使用します。 @alexのプラグインとは異なり、これは要素の背景画像を考慮せず、img要素のみを考慮します。

// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {

    // get all the images (excluding those with no src attribute)
    var $imgs = this.find('img[src!=""]');
    // if there's no images, just return an already resolved promise
    if (!$imgs.length) {return $.Deferred().resolve().promise();}

    // for each image, add a deferred object to the array which resolves when the image is loaded (or if loading fails)
    var dfds = [];  
    $imgs.each(function(){

        var dfd = $.Deferred();
        dfds.Push(dfd);
        var img = new Image();
        img.onload = function(){dfd.resolve();}
        img.onerror = function(){dfd.resolve();}
        img.src = this.src;

    });

    // return a master promise object which will resolve when all the deferred objects have resolved
    // IE - when all the images are loaded
    return $.when.apply($,dfds);

}

その後、次のように使用できます。

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
        $('#divajax').html(data).imagesLoaded().then(function(){
            // do stuff after images are loaded here
        });
    }
});

うまくいけば、それは誰かのために役立ちます。

上記のコードを使用すると、画像の1つにエラーが発生した場合（URLが間違っていたなど）、約束はとにかく解決され、エラーは無視されます。これはあなたが望むものかもしれませんが、状況によっては、画像の読み込みに失敗した場合、代わりにあなたがしていることを中止したいかもしれません。その場合、次のようにonerror行を置き換えることができます。

img.onerror = function(){dfd.reject();}

そして、このようなエラーをキャッチします。

$('#divajax').html(data).imagesLoaded().done(function(){
    // do stuff after all images are loaded successfully here
}).fail(function(){
    // do stuff if any one of the images fails to load
});
46
Daniel Howard

JQueryプラグイン waitForImages ...を使用できます.

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {

         $('#divajax').html(data).hide().waitForImages(function() {
             $(this).show();
         });

    }
});

これにより、要素が要素に読み込まれ、非表示になり、子孫img要素が読み込まれると再表示されます。

17
alex

ロードイベントに何かをバインドして、いつ完了したかを知ることができます。

$('<img>').bind('load', function() {
    $(this).appendTo('body');
});

または、 このプラグイン を使用できます。

10
Lyle Pratt

これは、imgロードごとに個別にトリガーします。

$('img').on('load', function() {
      // do something
});

私は使用しました：

var loaded = 0;
$('img').on('load', function() {
   loaded++;
   if(loaded == $('img').length){
      // do something
   }
});
4
Aureliano Far Suau

imagesloaded JavaScriptとjQueryで動作するプラグインを使用できます。ロードされたコンテンツでajax successコールバック関数内で使用してみてください。 imagesloadedコールバック関数がトリガーされない間、すべてのコンテンツを非表示にします。以下のサンプルコードを参照してください

$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
        var $divajax = $('#divajax').html(data).hide();
        $divajax.imagesLoaded(function() {
             $divajax.show();
         });

    }
});
2
Girish

このコードを試してください。正常に動作します。

 $。ajax（{
 url： "../api/listings",
 type： 'GET'、
 success：function（html）{
 $（ '＃container'）。append（html）; 
 $（ '＃container img'）。on（ 'load'、function（）{console.log（ 'images loaded'） }）; 
}; 
}）;
0
Duy Phan

ダニエルのソリューションのプラグインで画像が見つからない場合、小さなバグがあります。

他の人が同じ問題に遭遇した場合に備えて：

変化する：

// if there's no images, just return an already resolved promise
if (!$imgs.length) {return $.Deferred.resolve().promise();}

に：

// if there's no images, just return an already resolved promise
    if (!$imgs.length) {
        var dfd = $.Deferred();
        return dfd.resolve().promise();
    }
0
Milton Pena

Jqueryの.load（）の使用を検討する

以下の説明があります：

Loadイベントは、要素とすべてのサブ要素が完全にロードされると、要素に送信されます。このイベントは、URLに関連付けられている任意の要素（画像、スクリプト、フレーム、iframe、ウィンドウオブジェクト）に送信できます。

0
AlanFoster
$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>').load(function() {
$.ajax({
    cache: false,
    url: 'ajax/content.php',
    success: function(data) {
          $('#divajax').html(data);
    }
});
});
0
sv_in