触发身体负载完成js / jquery事件 [英] Trigger event on body load complete js/jquery

问题描述

有没有办法在页面加载完成后触发事件或调用一个简单的函数。

如果你有任何的参考资料，请提供相关的建议。 提到了就绪函数（及其快捷方式），但即使早于此，也可以将代码放在脚本中在结束 body 标记（这是YUI和Google Closure人员推荐的内容）之前添加标记，如下所示：

 < script type ='text / javascript'> 
 pageLoad（）; 
< / script> 
< / body> 
  

此时，该脚本标记之上的所有内容都可在DOM中使用。

因此，您的选项按发生顺序排列：

1. 最早：函数调用 script 标记，然后关闭 body 标记。现在DOM 已经准备就绪（根据Google Closure人员的说法，他们应该知道;我也在很多浏览器上测试过它）。




2. Earlyish： jQuery.ready 回调（及其快捷方式表单）。




3. 在所有页面元素（包括图片）完全加载之后， onload
   





下面是一个实例： http://jsbin.com/icazi4 ，相关摘要：



 < / body> ; 
< script type ='text / javascript'> 
 runPage（）; 
 
 jQuery（function（）{
 display（From  jQuery.ready< / tt> callback。）; 
}）; 
 $ b $（window）.load（function（）{
 display（from< tt> window.onload< / tt> callback。）; 
}）; 
 $ b $ function runPage（）{
 display（从} 
 
函数显示（msg）{
 var p = document.createElement（'p'）; 
 p.innerHTML = msg; 
 document.body.appendChild（p）; 
} 
< / script> 
  

（是的，我可以将jQuery用于 display 函数，但我从一个非jQuery模板开始。）




I want to trigger one event on page load complete using javascript/jquery.

Is there any way to trigger event or call a simple function once page loading fully completes.

Please suggest folks if you any reference.

解决方案

Everyone's mentioned the ready function (and its shortcuts), but even earlier than that, you can just put code in a script tag just before the closing body tag (this is what the YUI and Google Closure folks recommend), like this:

<script type='text/javascript'>
pageLoad();
</script>
</body>

At this point, everything above that script tag is available in the DOM.

So your options in order of occurrence:

1. Earliest: Function call in script tag just before closing the body tag. The DOM is ready at this point (according to the Google Closure folks, and they should know; I've also tested it on a bunch of browsers).

2. Earlyish: the jQuery.ready callback (and its shortcut forms).

3. Late, after all page elements including images are fully loaded: window onload event.

Here's a live example: http://jsbin.com/icazi4, relevant extract:

</body>
<script type='text/javascript'>
  runPage();

  jQuery(function() {
    display("From <tt>jQuery.ready</tt> callback.");
  });

  $(window).load(function() {
    display("From <tt>window.onload</tt> callback.");
  });

  function runPage() {
    display("From function call at end of <tt>body</tt> tag.");
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = msg;
    document.body.appendChild(p);
  }
</script>

(Yes, I could have used jQuery for the display function, but I was starting with a non-jQuery template.)

这篇关于触发身体负载完成js / jquery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！