Faire que la fonction jquery s'exécute au chargement de la page

J'ai une fonction jquery pour modifier l'opacité d'une image au survol de la souris hover pour produire un effet pulsatoire, mais je voudrais le changer pour que l'image clignote dès que la page se charge, en supprimant au survol de la souris les éléments de la souris dessus et de la souris.

Voici le code que j'ai

    (function($) {
        $(document).ready(function() {
            window.pulse_image = null;
            window.pulse_continue_loop = false;

            $('.pulse_image').mouseover(function() {
            //User is hovering over the image.
            window.pulse_continue_loop = true;
            window.pulse_image = $(this);

            PulseAnimation(); //start the loop
        }).mouseout(function() {
            window.pulse_continue_loop = false;
            window.pulse_image.stop();
            window.pulse_image.css('opacity',1);
        });
    });
})(jQuery);


function PulseAnimation()
{
    var minOpacity = .33;
    var fadeOutDuration = 650;
    var fadeInDuration = 650;

    window.pulse_image.animate({
        opacity: minOpacity
    }, fadeOutDuration, function() {
        window.pulse_image.animate({
            opacity: 1
        }, fadeInDuration, function() {
            if(window.pulse_continue_loop) {
                PulseAnimation();
            }
        })
    });
}

De
http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

source d'informationauteur Naz

  1. 13
    (function($) {
    $(document).ready(function() {
        window.pulse_image = $('.pulse_image');
        window.pulse_continue_loop = true;
        PulseAnimation(); //start the loop
    });
})(jQuery);​
  2. 5

    Je ne vois pas pourquoi tu ne pourrais pas simplement supprimer le code relatif à la mouseover et mouseout événements. Si par "chargement de la page" vous voulez dire quand le document HTML est chargé, essayez ceci:

    $(document).ready(function() {
    window.pulse_image = $('.pulse_image');
    window.pulse_continue_loop = true;
    PulseAnimation();
});

    Si par "chargement de la page" vous voulez dire quand toutes les images sur une page ont également chargé ensuite, essayez ceci:

    $(window).load(function() {
    window.pulse_image = $('.pulse_image');
    window.pulse_continue_loop = true;
    PulseAnimation();
});

    Le dernier exemple de code va attendre jusqu'à ce que toutes les images ont fini de charger. Cela va déclencher via le window "chargés". Plutôt, le premier exemple de code montre la document être prêt ce qui signifie que le document a été chargé, mais pas toutes les ressources liées au document.

  3. 2

    Ici est la façon dont je l'ai fait:

        <script type="text/javascript">
    $(document).ready(function () {
        alert('Document Ready'); 
        $("#imgPreview").attr('src', '/Upload/Upload_Image.png');
    });
</script>
  4. 1
      $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    PulseAnimation(); //start the loop
  });
  5. 0

    il existe de nombreuses façons de faire cet effet mais qui, je compris la plus rapide est 

            setTimeout(function(){
        $(".pulse_image").trigger('mouseover');
        }, 1300);

    ce n'est pas la meilleure solution pour sûr, mais il va faire le "truc" ... il suffit d'ajouter ce doc.prêt

  6. 0
      $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    setTimeout(function(){
      PulseAnimation();
    } //start the loop
  });
  7. 0

    vous pouvez essayer de cette façon, aussi.
    cela va déclencher à chaque fois que votre page est en cours de chargement.

    function pageLoad(sender,args) {
//call your function
}
  8. 0

    Ici est une variante de chargement de données par défaut avec un appel ajax lors du chargement de la page.

    $(document).ready(function() {

    $.ajax({
        type: 'post',
        url: 'include/ajax.php',
        data: $('#search_filters').serialize(),
        success: function (response) {
            $('#search_display').html(response);
        }
    });

});