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/

score 28 · Accepted Answer · answered Sep 17 '12 at 23:24

28

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

answered Sep 17 '12 at 23:24

Nope

22,147
7
47
72

cereallarceny · Answer 2 · 2012-09-17T23:27:35.080

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.

score 3 · Answer 3 · answered Sep 17 '12 at 23:22

3

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

answered Sep 17 '12 at 23:22

Stphane

3,368
5
32
47

Anjan Kant · Answer 4 · 2016-08-22T10:09:23.180

2

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>

edited Aug 22 '16 at 10:09

answered Oct 21 '15 at 10:18

Anjan Kant

4,090
41
39

score 1 · Answer 5 · edited Oct 16 '18 at 08:20

1

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.

edited Oct 16 '18 at 08:20

Stphane

3,368
5
32
47

answered Sep 17 '12 at 23:42

dsa

76
5

score 1 · Answer 6 · answered Jul 20 '18 at 17:09

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

});

Kaptan · Answer 7 · 2014-01-24T12:51:47.057

0

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

edited Jan 24 '14 at 12:51

answered Jan 24 '14 at 11:58

Kaptan

336
2
11

Senguttuvan Amaladass · Answer 8 · 2014-09-17T11:14:12.440

0

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

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

edited Sep 17 '14 at 11:14

answered Sep 17 '14 at 09:28

Senguttuvan Amaladass

161
1
7

Make jquery function run on page load

8 Answers8

Linked