web-dev-qa-db-fra.com

JQuery attend la fin du chargement de la page avant de démarrer le diaporama?

J'ai un site avec une image d'en-tête rotative (vous les avez tous vus). Je veux faire ce qui suit:

  1. Chargez la page entière plus la première image d'en-tête
  2. Démarrez le diaporama de l'image d'en-tête en effectuant une transition toutes les x secondes ou lorsque l'image suivante a fini de se charger, selon la dernière éventualité

Je n'ai pas vraiment besoin d'un exemple qui fasse vraiment cela.

javascriptjqueryslideshowpreload
12
DevDevDev

Vous connaissez probablement déjà $ (document) .ready (...). Ce dont vous avez besoin est un mécanisme de préchargement; quelque chose qui récupère des données (texte ou images ou autre) avant de les montrer. Cela peut rendre un site beaucoup plus professionnel.

Jetez un œil à jQuery.Preload (il y en a d'autres). jQuery.Preload a plusieurs façons de déclencher le préchargement et fournit également une fonctionnalité de rappel (lorsque l'image est préchargée, alors montrez-la). Je l'ai beaucoup utilisé et cela fonctionne très bien.

Voici à quel point il est facile de démarrer avec jQuery.Preload:

$(function() {
  // First get the preload fetches under way
  $.preload(["images/button-background.png", "images/button-highlight.png"]);
  // Then do anything else that you would normally do here
  doSomeStuff();
});
13
Jacob Marble

tu peux essayer

$(function()
{

$(window).bind('load', function()
{

// INSERT YOUR CODE THAT WILL BE EXECUTED AFTER THE PAGE COMPLETELY LOADED...

});
});

j'ai eu le même problème et ce code a fonctionné pour moi. comment cela fonctionne pour vous aussi!

20
Website-Chef

Eh bien, le premier peut être réalisé avec la fonction document.ready dans jquery

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

L'image changeante peut être obtenue avec n'importe quel nombre de plugins

Si vous le souhaitez, vous pouvez vérifier si les images sont chargées avec la propriété complète. Je sais qu'au moins le diaporama du cycle malsup jquery utilise cette fonction en interne.

10
stimms

Le mécanisme $ (document) .ready est censé se déclencher une fois que le DOM a été chargé avec succès mais ne donne aucune garantie quant à l'état des images référencées par la page.

En cas de doute, revenez au bon vieux événement window.onload:

window.onload = function()
{
  //your code here
};

Maintenant, c'est évidemment plus lent que l'approche jQuery. Cependant, vous pouvez faire un compromis quelque part entre les deux:

$(document).ready
(
  function()
  {
    var img = document.getElementById("myImage");

    var intervalId = setInterval(
                        function()
                        {
                          if(img.complete)
                          {
                            clearInterval(intervalId);
                            //now we can start rotating the header
                          }
                        },
                        50);
  }
);

Pour expliquer un peu:

  1. on récupère l'élément DOM de l'image dont on veut complètement chargé l'image

  2. nous définissons ensuite un intervalle de déclenchement toutes les 50 millisecondes.

  3. si, pendant l'un de ces intervalles, l'attribut complet de cette image est mis à vrai, l'intervalle est effacé et l'opération de rotation peut démarrer en toute sécurité.

4
David Andres

avez-vous essayé cela?

$("#yourdiv").load(url, function(){ 

         your functions goes here !!!

});
3
Najib El Alam

Si vous passez une fonction jQuery, elle ne fonctionnera pas tant que la page ne sera pas chargée:

<script type="text/javascript">
$(function() {
    //your header rotation code goes here
});
</script>
1
Ryan Doherty