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

【问题标题】：Make jquery function run on page load使 jquery 函数在页面加载时运行
【发布时间】：2012-09-10 04:58:35
【问题描述】：

我有一个 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/

【问题讨论】：

标签： jquery function opacity

【解决方案1】：

我不明白您为什么不能删除与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 已准备就绪，这意味着文档已加载，但并非与文档相关的所有资源都已加载。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

有很多方法可以产生这种效果，但我发现最快的一种方法是

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

这肯定不是最好的解决方案，但它会起到“技巧”的作用......只需将其添加到 document.ready 回调中。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

这是我的做法：

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

【讨论】：

【解决方案8】：

这是一种在页面加载时通过 ajax 调用加载默认数据的变体。

$(document).ready(function() {

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

});

【讨论】：