Tüm ajax .load() istekleri tamamlandıktan sonra işlevi çalıştır

Question

Sekme kümesine sahip bir sayfam var. Sekmelerin her biri jQuery .load() işlevi tarafından yüklenir.

Tüm ajax istekleri tamamlandığında ortadan kaybolan bir yükleme animasyonu görüntülemek istiyorum. Ancak, document.ready() sadece bana sınırlı bir başarı sağlamıştır.

Yükleme animasyonunu gizlemek için kod çalıştırılmadan önce tüm ajax isteklerinin tamamlanmasını nasıl sağlayabilirim? belgelere Başına

Answer 1

ajaxComplete

:

$('.log').ajaxComplete(function() { 
    $(this).text('Triggered ajaxComplete handler.'); 
}); 

Answer 2

Kullanım .load() için callback argüman, bir bayrak ayarlamak veya geri arama işlevinde bir sayaç artar. Tüm bayraklar ayarlandığında veya sayaç sekmelerin sayısına ulaştığında, tüm sekmelerin yüklendiğini bilirsiniz ve animasyonu kaldırabilirsiniz. Burada

loadedTabs = 0; 

function onLoad() { 
    for (int i = 0; i < numTabs; ++i) { 
     tabs[i].load(tabUrl(i), tabLoaded); 
    } 
} 

function tabLoaded() { 
    ++loadedTabs; 
    if (loadedTabs == numTabs) 
     loadingAnimation.display = 'none'; 
} 

Answer 3

.ajaxStop(handler) 

Belgeleme: veya JavaScript geçerli olabilir de olmayabilir de pseudocode

bu yazı ve cevaplara http://api.jquery.com/ajaxStop/

Answer 4

Bak ... https://stackoverflow.com/a/13090589/999958

Yararlı bir Benim için geçici çözüm: Her .complete (...) ajaxCallComplete() çağrısına bakın; Umut yardımcı olabilir

$(document).ready(function(){ 
    loadPersons(); 
    loadCountries(); 
    loadCities(); 
}); 

// Define how many Ajax calls must be done 
var ajaxCalls = 3; 
var counter = 0; 
var ajaxCallComplete = function() { 
    counter++; 
    if(counter >= ajaxCalls) { 
      // When all ajax calls has been done 
     // Do something like hide waiting images, or any else function call 
     $('*').css('cursor', 'auto'); 
    } 
}; 

var loadPersons = function() { 
     // Show waiting image, or something else 
    $('*').css('cursor', 'wait'); 

    var url = global.ctx + '/loadPersons'; 
    $.getJSON(url, function(data) { 
      // Fun things 
    }) 
    .complete(function() { ajaxCallComplete(); }); 
}; 

var loadCountries = function() { 
    // Do things 
    var url = global.ctx + '/loadCountries'; 
    $.getJSON(url, function(data) { 
      // Travels 
    }) 
    .complete(function() { ajaxCallComplete(); }); 
}; 

var loadCities = function() { 
    // Do things 
    var url = global.ctx + '/loadCities'; 
    $.getJSON(url, function(data) { 
      // Travels 
    }) 
    .complete(function() { ajaxCallComplete(); }); 
}; 

... Temelde

Answer 5

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_beginRequest(BeginRequestHandler); 
prm.add_endRequest(EndRequestHandler); 

function BeginRequestHandler(sender, args) { 
    $modal.show(); 
    $overlay.show(); 
} 

function EndRequestHandler(sender, args) { 
    $modal.hide(); 
    $overlay.hide(); 

} 

Answer 6

$(document).ready(function() { 
    $(document).ajaxComplete(function() { 
     alert('Completed'); 
    }); 
}); 

Answer 7

, ben yükü 2 açılan kutular tamamladıktan sonra ve sonunda bir kılavuz yüklemek istediğiniz, bu konunun neredeyse benzer var Ben bir ızgara yüklemek istiyorum, bu yüzden iLGİLİ o

function LoadGrid1() 
    { 
     //ajax1 load first dropbox 
    } 

    function LoadGrid2() 
    { 
     //ajax2 load Second dropbox 
    } 

    function LoadGrid() 
    { 
     //ajax3 load Grid after complete the two drops loading... 
    } 

    $(document).ready(function() { 
     LoadGrid1(); 
     LoadGrid2(); 
    }); 

    var Executed = false; 

    jQuery(function ($) { 
     $(document).ajaxStop(function() { 
      // Executed when all ajax requests are done. 
      if (!Executed) LoadGrid(); 
      Executed = true; 
     }); 
    });