JQuery attend le chargement de la page avant de lancer le diaporama?

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

  1. Charge l'intégralité de la page, en plus du premier en-tête de l'image
  2. Démarrer l'image d'en-tête diaporama transition toutes les x secondes ou lorsque l'image suivante a fini de charger, si elle est postérieure

Je n'ai pas vraiment besoin d'un exemple qui n'a vraiment cette.

source d'informationauteur DevDevDev

  1. 11

    Vous le savez probablement déjà, à propos de $(document).prêt(...). Ce que vous avez besoin est un mécanisme de préchargement; quelque chose qui récupère des données (texte ou des images ou quoi que ce soit) avant de le montrer. Cela peut faire un site web se sentir beaucoup plus professionnel.

    Prendre un coup d'oeil à jQuery.Précharge (il y en a d'autres). jQuery.La précontrainte a plusieurs façons de déclencher le préchargement, et fournit également une fonctionnalité de rappel (quand l'image est préchargé, puis de l'afficher). Je l'ai utilisé massivement, et il fonctionne très bien.

    Voici comment il est facile de commencer 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();
});
  2. 18

    vous pouvez 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!

  3. 7

    Bien la première peut être réalisé avec le document.prêt en fonction jquery

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

    L'évolution de l'image peut être réalisé avec n'importe quel nombre de plugins

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

  4. 3

    Le $(document).prêt mécanisme est destiné à feu après les DOM a été chargé avec succès, mais ne donne aucune garantie quant à l'état d'images référencées par la page.

    En cas de doute, le repli sur le bon ol' de la fenêtre.événement onload:

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

    Maintenant, c'est évidemment plus lent que le jQuery approche. Cependant, vous pouvez trouver 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. nous emparer de l'élément du DOM de l'image
      dont l'image nous voulons complètement
      chargé

    2. nous avons ensuite définir un intervalle de
      feu toutes les 50 millisecondes.

    3. si, au cours d'un de ces intervalles, l'
      complet attribut de cette image est
      la valeur true, l'intervalle est effacé
      et l'opération de rotation est sûr
      commencer.

  5. 3

    avez-vous essayé ?

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

         your functions goes here !!!

});
  6. 1

    Si vous passez jQuery une fonction, il ne fonctionnera pas jusqu'à ce que la page est chargée:

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