请jQuery函数在页面加载时运行(Make jquery function run on page

我有一个jQuery函数来改变鼠标悬停的图像的透明度产生脉动的影响，但我想改变它，使图像尽快搏动在页面加载，悬停和鼠标移开移除鼠标悬停元素鼠标。

这里是我的代码

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

从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:

我不明白为什么你不能只是删除有关的代码mouseover和mouseout事件。 如果“页面加载”你的意思加载HTML文档时，试试这个：

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

如果“页面加载”你的意思是，当所有页面上的图片也加载那么试试这个：

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

后者的代码示例会等到所有图像都加载完毕。 这将通过触发window是“装”。 相反，第一个代码示例显示了document准备好，这意味着该文件已加载，但并非所有与文档相关的资源也一样。

Answer 3:

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

Answer 4:

这是我怎么做的方式：

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

Answer 5:

下面是用Ajax调用加载网页时加载默认的数据的变化。

$(document).ready(function() {

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

});

Answer 6:

有许多方法可以使这种效果，但一个我想通了最快的是

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

这是不是肯定的最佳解决方案，但它会做的“绝招” ......刚刚加入到这个document.ready回调。

Answer 7:

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

Answer 8:

你可以试试这个方法也。 这个时候你的页面加载将触发。

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

文章来源: Make jquery function run on page load