Question

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

一旦页面加载完全完成，是否有任何方法可以触发事件或调用简单函数。

如果你有任何参考，请建议大家。

Answer 1

每个人都提到ready函数（及其快捷方式），但即使在此之前，您也可以在结束script标记之前将代码放在body标记中（这是YUI和Google Closure人员推荐的内容），如下所示：

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

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

所以您的选择按发生顺序排列：

最早：在关闭script标记之前调用body标记中的函数。此时DOM 准备就绪（根据Google Closure人员的说法，他们应该知道;我也在一堆浏览器上对其进行了测试）。
早期：jQuery.ready回调（及其快捷方式）。
在所有页面元素（包括图片）完全加载后，window onload事件发生后，

以下是一个实例：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，images，...）

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

当DOM元素加载时（不必加载所有图像）

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

然后你可以触发任何事件

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

Answer 3

<强> jQuery的：

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

如果要在加载所有页面资源（包括images / frames / DOM）后运行代码，则需要使用load事件：

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

<强> JavaScript的：

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

Answer 4

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

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

但您也可以在任何其他元素上使用.load函数。因此，如果您有一个特别大的图像，并且您希望在加载时执行某些操作，但是当dom加载时，页面的其余部分会加载代码，您可以执行以下操作：

$(function(){
    // Dom loaded code

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

jquery .load函数与普通的.onload几乎相同。

Answer 5

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

一旦DOM结构准备就绪，这将触发。

Answer 6

不是

  $(document).ready(function() {

  });

你在找什么？

Answer 7

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

Answer 8

您还可以use script标记中的defer属性。只要您没有指定async，这对您的目标当然没有用。

示例：

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

作为described here：

在上面的示例中，浏览器将并行下载这两个脚本，并在DOMContentLoaded触发之前执行它们，维护它们的顺序。

[...]延迟脚本应在文档解析后按照添加顺序运行[...]

相关的Stackoverflow讨论：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();
            } 
        } });

Answer 10

下面的代码将在脚本加载完成后调用一个函数

<html>
 <body></body>
<script>
 call();
 function call(){ alert("Hello Word");}
</script>
</html>

身体负荷上的触发事件完成js / jquery

10 个答案: