使jquery函数在页面加载时运行

Question

我有一个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准备就绪,这意味着已加载文档,但并非所有与文档相关的资源也都已加载.