openclassroom - telecharger jquery




Détecter si la page a fini de charger (7)

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!


Est-ce ce que vous aviez en tête?

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

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

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

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(){...});
    







jquery