使 jquery 函数在页面加载时运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12468374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make jquery function run on page load
提问by Naz
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.
我有一个 jquery 函数来更改鼠标悬停时图像的不透明度以产生脉动效果，但我想更改它以便图像在页面加载时立即脉动，删除鼠标悬停元素鼠标悬停和鼠标移开.
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();
}
})
});
}
回答by Nope
(function($) {
$(document).ready(function() {
window.pulse_image = $('.pulse_image');
window.pulse_continue_loop = true;
PulseAnimation(); // start the loop
});
})(jQuery);?
回答by cereallarceny
I don't see why you couldn't just remove the code relating to the mouseoverand mouseoutevents. If by "page load" you mean when the HTML document is loaded, try this:
我不明白为什么您不能删除与mouseover和mouseout事件相关的代码。如果“页面加载”是指加载 HTML 文档时，请尝试以下操作：
$(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 windowbeing "loaded". Rather, the first code example shows the documentbeing ready which means that the document has been loaded, but not all the resources related to the document have as well.
后一个代码示例将等待所有图像加载完毕。这将通过window“加载”触发。相反，第一个代码示例显示了document准备就绪，这意味着文档已加载，但并非与文档相关的所有资源都已加载。
回答by Stphane
$(document).ready(function() {
window.pulse_continue_loop = true;
window.pulse_image = $('.pulse_image');
PulseAnimation(); // start the loop
});
回答by Anjan Kant
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>
回答by Mike Volmar
Here is a variation that loads default data with an ajax call when the page loads.
这是一个在页面加载时通过 ajax 调用加载默认数据的变体。
$(document).ready(function() {
$.ajax({
type: 'post',
url: 'include/ajax.php',
data: $('#search_filters').serialize(),
success: function (response) {
$('#search_display').html(response);
}
});
});
回答by dsa
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.readycallback.
这肯定不是最好的解决方案，但它会做“伎俩”......只需将其添加到document.ready回调中即可。
回答by Kaptan
$(document).ready(function() {
window.pulse_continue_loop = true;
window.pulse_image = $('.pulse_image');
setTimeout(function(){
PulseAnimation();
} // start the loop
});
回答by Senguttuvan Amaladass
you can try this way also. this will trigger whenever your page is loading.
你也可以试试这种方式。这将在您的页面加载时触发。
function pageLoad(sender,args) {
// call your function
}
