Sayfanın yüklenmesinin bitip bitmediğini tespit edin

Bir sayfanın ne zaman yüklenmesinin bittiğini, yani tüm içeriğini, javascript'i ve css ve görüntüleri gibi varlıkları tespit etmenin bir yolu var mı?

şöyle:

if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}

ve ayrıca sayfa 1 dakikadan uzun süredir yükleniyorsa, aşağıdaki gibi başka bir şey yapın:

if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}

Apple'ın MobileMe'si gibi web sitelerinin benzer kontroller yaptığını gördüm, ancak büyük kod kitaplıklarında bunu çözemedim.

Biri yardım edebilir mi?

Teşekkürler

DÜZENLEME: Aslında yapmak istediğim şey bu:

// hide content
$("#hide").hide();

// hide loading
$("#loading").hide();

// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);

jQuery(window).load(function() {
  $("#hide").fadeIn();

  $("#loading").fadeOut(function() {
    $(this).remove();
    clearInterval(loadingAnim);
  });

  setTimeout(function() {
    $("#error").fadeIn();
  }, 60000);
});

jQuery(window).load(function () {
    alert('page is loaded');

    setTimeout(function () {
        alert('page is loaded and 1 minute has passed');   
    }, 60000);

});

Veya http://jsfiddle.net/tangibleJ/fLLrs/1/

Ayrıca bkz http://api.jquery.com/load-event/ jQuery (pencere) .Load üzerinde bir açıklama için.

Güncelleme

Nasıl javascript yükleme işlerinde ve iki olay üzerine ayrıntılı bir açıklama DOMContentLoaded ve OnLoad bulunabilir bu sayfada .

DOMContentLoaded : DOM değiştirilmeye hazır olduğunda. jQuery'nin bu olayı yakalama yolu ile jQuery(document).ready(function () {});.

OnLoad : DOM hazır olduğunda ve tüm varlıklar - buna resimler, iframe, yazı tipleri vb. Dahil - yüklendiğinde ve dönen tekerlek / saat sınıfı kaybolduğunda. jQuery'nin bu olayı yakalama yolu yukarıda belirtilmiştir jQuery(window).load.

jQuery'de ne aradığınıza bağlı olarak bunu yapmanın iki yolu vardır ..

jquery kullanarak yapabilirsin

• // bu, bunu çağırmadan önce metin varlıklarının yüklenmesini bekleyecek (dom .. css .. js)

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

• // bu, çalıştırılmadan önce tüm resimlerin ve metin varlıklarının yüklemesinin bitmesini bekleyecektir

  $(window).load(function(){...});
  

Buna yüklenme denir. DOM ready, aslında onload işleminin görüntülerde beklemesinin tam nedeni için oluşturuldu. ( Matchu'dan bir süre önce benzer bir soru üzerine alınan cevap .)

window.onload = function () { alert("It's loaded!") }

onload, belgenin parçası olan tüm kaynakları bekler.

Her şeyi açıkladığı bir soruya bağlantı verin:

Beni tıkla, istediğini biliyorsun!

Bence en kolay yol

var items = $('img, style, ...'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

Biraz çılgın olmak için DÜZENLE:

var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' + 
    'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' + 
    'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' +
    'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' +
    'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' +
    'label, legend, li, link, listing, map, marquee, media, menu, meta, ' +
    'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' +
    'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' + 
    'source, span, strike, strong, style, sub, sup, table, tbody, td, ' + 
    'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' + 
    'window, xmp'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

Document.readyState gibi kontrol edebileceğiniz başka bir seçenek ,

var chkReadyState = setInterval(function() {
    if (document.readyState == "complete") {
        // clear the interval
        clearInterval(chkReadyState);
        // finally your page is loaded.
    }
}, 100);

ReadyState Sayfasının belgelerinden tam durumun özeti şu şekildedir:

Belge yüklenirken "yükleniyor", ayrıştırma tamamlandığında ancak alt kaynakları yüklemeye devam ettiğinde "etkileşimli" ve yüklendikten sonra "tamamlandı" döndürür.

Bir seçenek, sayfanın az miktarda javascript içeren boş bırakılmasıdır. Gerçek sayfa içeriğini almak için bir AJAX çağrısı yapmak için komut dosyasını kullanın ve başarı işlevinin sonucu geçerli belgenin üzerine yazmasını sağlayın. Zaman aşımı işlevinde "harika başka bir şey yapabilirsiniz"

Yaklaşık sözde kod:

$(document).ready(function(){
    $.ajax
      url of actual page
      success:do something amazing
      timeout: do something else
});

Aklından geçen bu muydu?

$("document").ready( function() {
    // do your stuff
}

var pageLoaded=0;

$(document).ready(function(){
   pageLoaded=1;
});

Jquery kullanarak: https://learn.jquery.com/using-jquery-core/document-ready/

Jquery veya bunun gibi bir şey olmadan neden olmasın?

var loaded=0;
var loaded1min=0;
document.addEventListener("DOMContentLoaded", function(event) {
   loaded=1;
    setTimeout(function () {
      loaded1min=1;
    }, 60000);
});

Bilginize, yorumlarda soran insanların, aslında projelerde kullandığım şey:

function onLoad(loading, loaded) {
    if(document.readyState === 'complete'){
        return loaded();
    }
    loading();
    if (window.addEventListener) {
        window.addEventListener('load', loaded, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', loaded);
    }
};

onLoad(function(){
   console.log('I am waiting for the page to be loaded');
},
function(){
    console.log('The page is loaded');
});