关于身体负载完成的触发事件js/jquery

Question

我想使用javascript/jquery在页面加载完成时触发一个事件。

一旦页面加载完成，有什么办法触发事件或调用一个简单的函数。

如果你有任何的参考，请建议乡亲们。

Answer 1

每个人的提到ready功能（和它的快捷方式），但即使是早于，你可以把代码放在一个script标签在结束body标签之前（这是什么YUI和谷歌关闭乡亲推荐），如下所示：

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

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

所以你出现的顺序选择：

1. 最早的：在script标签刚刚闭幕的body标记之前函数调用。 DOM 目前已准备好（根据Google Closure人员的说法，他们应该知道;我也在一些浏览器上测试过）。

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

3. 晚，毕竟页面元素包括图像满载：windowonload事件。

这里是一个活生生的例子：http://jsbin.com/icazi4，有关摘要：

</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> 

（是的，我可以用jQuery的为display的功能，但我开始与非jQuery的模板。）

Answer 2

页面加载完全（DOM，图片，...）

$(window).load(function(){ 
    // full load 
}); 

当DOM元素负载（不一定是全部图像将被加载）

$(function(){ 
    // DOM Ready 
}); 

然后你就可以触发任何事件

$("element").trigger("event"); 

Answer 3

$(document).ready(function() { 
    // do needed things 
}); 

这将在DOM结构准备就绪后触发。

Answer 4

的jQuery：

$(function(){ 
    // your code...this will run when DOM is ready 
}); 

如果希望所有页面资源，包括图片/帧/ DOM已加载后运行你的代码，你需要使用load事件：

$(window).load(function(){ 
    // your code... 
}); 

JavaScript：

window.onload = function(){ 
    // your code... 
}; 

Answer 5

是不是

$(document).ready(function() { 

    }); 

你在找什么？

Answer 6

$(document).ready(function() { YOUR CODE HERE }) 

Answer 7

如果您想在加载所有内容时执行某些操作，则windows.load函数非常有用。

$(window).load(function(){ 
    // full load 
}); 

但你也可以使用任何其他元素的.load功能。所以，如果你有一个特别大的图片，你想要做的事时加载，但你的页面加载代码的其余部分在DOM加载你可以这样做：

$(function(){ 
    // Dom loaded code 

    $('#largeImage').load({ 
     // Image loaded code 
    }); 
}); 

而且jQuery的.load功能是相当多与正常的.onload相同。

Answer 8

您还可以在script标记中使用usedefer属性。 只要你没有指定async这当然不会对你的目标有用。

实施例：

<script src="//other-domain.com/script.js" defer></script> 
<script src="myscript.js" defer></script> 

作为described here：

在上述示例中，浏览器将下载并联脚本和执行它们只是DOMContentLoaded之前火灾，保持它们的次序。

[...]延期脚本应该运行该文件已经被解析之后，他们的顺序添加[...]

相关讨论＃1：How exactly does <script defer=“defer”> work?

Answer 9

这将调用函数时DOM结构已准备就绪

$(document).ready(function() { 
     userCommission(); 
     //Show commision box 
     $('#userroles').change(function(){ 
      userCommission(); 
     }); 

     function userCommission() { 
      var roles = $('#userroles').val(); 
      var result = roles.map(function (x) { 
       return parseInt(x, 10); 
      }); 
      var i = result.indexOf(6);   
      console.log(i); 
      if(i == -1) { 
       console.log('inside'); 
       $('.user-commission :input').attr("disabled", true);; 
       $('#user-commission').hide(); 
      } 
     } });