Make jquery function run on page load

Question

I have a jquery function to change the opacity of an image on mouse hover to produce a pulsating effect, but I would like to change it so that the image pulsates as soon as the page loads, removing the mouse hover elements mouse over and mouse out.

Here is the code I have

    (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();
            }
        })
    });
}

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

Answer 1

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

Answer 2

I don't see why you couldn't just remove the code relating to the mouseover and mouseout events. If by "page load" you mean when the HTML document is loaded, try this:

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

If by "page load" you mean when all the images on a page have also loaded then try this:

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

The latter code example will wait until all images have finished loading. This will trigger via the window being "loaded". Rather, the first code example shows the document being ready which means that the document has been loaded, but not all the resources related to the document have as well.

Answer 3

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

Answer 4

Here is the way How I did it:

    <script type="text/javascript">
    $(document).ready(function () {
        alert('Document Ready'); 
        $("#imgPreview").attr('src', '/Upload/Upload_Image.png');
    });
</script>

Answer 5

Here is a variation that loads default data with an ajax call when the page loads.

$(document).ready(function() {

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

});

Answer 6

There are many ways to make that effect but one I figured out fastest is

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

this is not the best solution for sure but it will do the "trick" ... just add this into document.ready callback.

Answer 7

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

Answer 8

you can try this way also. this will trigger whenever your page is loading.

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