$ (document) .ready() timeout pour les images

Question

Lorsque vous utilisez jQuery, attendez que le DOM soit prêt avant de commencer à faire des choses. Mon problème est avec les images. Parfois, les images prennent beaucoup de temps à charger, et pas du tout. Donc je veux que ready() ait essentiellement un timeout. Il attendra environ 5 secondes et si ces images ne sont pas chargées, la fonction sera exécutée.

Est-ce possible?

Answer 1

- Edit: Cette réponse n'est pas définitive, seulement utile.

Ne tenez pas compte de moi. C'est pour les images après qu'elles ont chargées. Vous voulez définir un délai d'expiration dès qu'il est rendu. Vous feriez quelque chose de légèrement différent dans ce cas. Sur le rendu de chaque image, vous définissez un délai de 'démarrage' et si le 'chargement' n'annule pas cela avant 5 secondes, vous lancez ce que vous voulez faire.

Il peut toutefois y avoir un événement antérieur à la charge auquel vous pouvez vous attacher de manière générale. Pas certain.

- Ancien:

En effet, monsieur, je crois que vous devriez être en mesure d'attacher juste à « img » l'événement « charge ».

Peut-être quelque chose comme:

// not tested, completely made up 
$("img").load({ alert("foo"); }); 

Answer 2

Je pense que vous avez peut-être confued document.ready avec window.onload

window.onload

c'est un événement qui se déclenche après la La page a terminé le chargement. Donc, cette fonction ne vous convient pas que vous devrez attendre toutes les images à avoir terminé le téléchargement (ou timeout)

document.ready

c'est un événement qui se déclenche après le DOM est prêt. C'est quand le navigateur a effectivement construit la page, mais peut-être encore besoin de saisir quelques images ou fichiers flash. Cette fonction sera ce que vous recherchez, car le DOM est prêt à être manipulé avant que toutes les images aient été téléchargées.

Vous pouvez configurer une minuterie au sein de cette fonction attendre pendant 5 secondes, et vérifier si vous avez téléchargé lesdites images

further reading

Exemple de code:

<script> 
    $(document).ready(function() { 
     var imagesLoaded = false; 
     var imagesTimer = setTimeout("alert('images failed to load')", 10000); 

     $("img.checkme").load(function(){ 
      imagesLoaded = true; 
      clearTimeout(imagesTimer); 
      alert('images loaded within 10 seconds') 
     }); 
    }); 
</script> 

Answer 3

J'ai un jQuery plugin qui attend que les images soient téléchargées dans le contexte d'un sélecteur, puis déclenche un rappel.

Vous pouvez faire ...

$('body').waitForImages(function() { 
    // Images have loaded. 
});