jquery telecharger Détecter si la page a fini de charger




telecharger jquery (8)

Existe-t-il un moyen de détecter quand une page a fini de charger, c'est-à-dire tout son contenu, son javascript et ses ressources comme css et images?

donc comme:

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

et aussi si la page a été chargée pendant plus de 1 minute puis faire autre chose comme:

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

J'ai vu des sites comme MobileMe d'Apple faire des vérifications similaires, mais n'ont pas été en mesure de le comprendre dans leurs énormes bibliothèques de code.

Quelqu'un peut-il aider?

Merci

EDIT: C'est essentiellement ce que je veux faire:

// 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);
});

C'est appelé onload. DOM ready a été créé pour la raison exacte que onload a attendu sur les images. (Réponse tirée de Matchu sur une question simmilaire il y a un moment.)

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

Onload attend toutes les ressources faisant partie du document.

Lien vers une question où il a tout expliqué:

Clique sur moi, tu sais que tu le veux!


Je pense que la façon la plus simple serait

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

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

EDIT, être un peu fou:

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
});

Pour info des personnes qui ont demandé dans les commentaires, c'est ce que j'ai réellement utilisé dans les projets:

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');
});

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

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

});

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

Voir aussi http://api.jquery.com/load-event/ pour une explication sur le jQuery (window) .load.

Mettre à jour

Une explication détaillée sur le fonctionnement du chargement javascript et les deux événements DOMContentLoaded et OnLoad peuvent être trouvés sur cette page .

DOMContentLoaded : lorsque le DOM est prêt à être manipulé. La façon dont jQuery capture cet événement est avec jQuery(document).ready(function () {}); .

OnLoad : Lorsque le DOM est prêt et que tous les éléments (y compris les images, les iframes, les polices, etc. ) ont été chargés et que la classe roue tournante / heure a disparu. La façon dont jQuery capture cet événement est la suivante: jQuery(window).load .


Il y a deux façons de le faire en jquery en fonction de ce que vous cherchez ..

en utilisant jquery vous pouvez faire

  • // ceci attendra que les assets textuels soient chargés avant d'appeler ceci (le dom .. css .. js)

    $(document).ready(function(){...});
    
  • // ceci attendra que toutes les images et tous les éléments textuels aient fini de se charger avant d'être exécutés

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

Sans jquery ou quoi que ce soit comme ça, pourquoi pas?

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


Une option est d'avoir la page vide, contenant une petite quantité de javascript. Utilisez le script pour effectuer un appel AJAX afin d'obtenir le contenu de la page et pour que la fonction de réussite écrive le résultat sur le document en cours. Dans la fonction de temporisation, vous pouvez "faire quelque chose d'extraordinaire"

Pseudocode approximatif:

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






jquery