web-dev-qa-db-fra.com

Faire fonctionner la fonction jquery au chargement de la page

J'ai une fonction jquery pour changer l'opacité d'une image au survol de la souris pour produire un effet de pulsation, mais je voudrais le changer pour que l'image palpite dès que la page se charge, en supprimant les éléments de survol 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/

jqueryfunctionopacity
15
Naz
(function($) {
    $(document).ready(function() {
        window.Pulse_image = $('.Pulse_image');
        window.Pulse_continue_loop = true;
        PulseAnimation(); // start the loop
    });
})(jQuery);​
15
Nope

Je ne vois pas pourquoi vous ne pouviez pas simplement supprimer le code relatif aux événements mouseover et mouseout. Si par "chargement de page" vous voulez dire lorsque 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 page" vous voulez dire que toutes les images d'une page ont également été chargées, essayez ceci:

$(window).load(function() {
    window.Pulse_image = $('.Pulse_image');
    window.Pulse_continue_loop = true;
    PulseAnimation();
});

Le dernier exemple de code attendra que toutes les images aient fini de se charger. Cela se déclenchera via le window étant "chargé". Au lieu de cela, le premier exemple de code montre que le document est prêt, ce qui signifie que le document a été chargé, mais pas toutes les ressources liées au document aussi.

7
cereallarceny
  $(document).ready(function() {
    window.Pulse_continue_loop = true;
    window.Pulse_image = $('.Pulse_image');
    PulseAnimation(); // start the loop
  });
3
Stphane

Voici 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>
2
Anjan Kant

Il existe de nombreuses façons de créer cet effet, mais celle que j'ai trouvée la plus rapide est

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

ce n'est pas la meilleure solution à coup sûr mais ça fera le "truc" ... il suffit d'ajouter ceci dans document.ready rappeler.

1
dsa

Voici une variante qui charge les 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);
        }
    });

});
1
Mike Volmar
  $(document).ready(function() {
    window.Pulse_continue_loop = true;
    window.Pulse_image = $('.Pulse_image');
    setTimeout(function(){
      PulseAnimation();
    } // start the loop
  });
0
Kaptan

vous pouvez également essayer de cette façon. cela se déclenchera à chaque chargement de votre page.

function pageLoad(sender,args) {
// call your function
}
0
Senguttuvan Amaladass