在页面加载完成时触发事件的js/jquery代码

Question

在页面加载完成时触发事件的js/jquery代码

javascriptjqueryhtml

22

我希望能够在页面加载完成时使用 JavaScript/jQuery 触发一个事件。

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

如果您有相关的参考资料，请提供建议。

- pravin

10个回答

25

当页面完全加载（包括DOM、图片等）后

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

当DOM元素加载时（并不一定所有图像都会被加载）

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

然后您可以触发任何事件

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

- BrunoLM

向其他人澄清：$function() { .. });是官方 $(document).ready(function() {...});的简写版本。请参阅http://learn.jquery.com/using-jquery-core/document-ready/. - Jochem Schulenklopper

10

jQuery：

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

如果您希望在所有页面资源包括图像/框架/DOM加载完成后运行代码，您需要使用load事件：

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

JavaScript:

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

- Sarfraz

3

如果您希望在所有内容都加载完成后执行某些操作，那么 windows.load 函数非常有用。

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

但您也可以在任何其他元素上使用.load函数。因此，如果您有一张特别大的图片，并且想在加载该图片时执行某些操作，而在DOM加载完成后加载页面中的其余代码，您可以执行以下操作：

$(function(){
    // Dom loaded code

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

同样，jquery的.load函数与正常的.onload函数基本相同。

- Coin_op

2

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

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

- Raynos

1

不是吗？

  $(document).ready(function() {

  });

你在寻找什么？

- mgamer

谢谢大家的快速回复，我在body加载时调用了函数，但是没有得到预期的结果...我没有使用$(document).ready...我会尝试一下这个方法... - pravin

0

这将在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();
            } 
        } });

- Nikunj K.

0

您还可以在 script 标签中使用 use 和 defer 属性。

只要不指定 async，这对您的目标当然不会有用。

示例：

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

如此处所述：

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

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

相关的Stackoverflow讨论：<script defer=“defer”>具体是如何工作的？

- rugk

0

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

- rahim asgari

-2

以下代码将在脚本完成加载时调用一个函数。

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

- devGarber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

所有人都提到了ready函数(以及它的快捷方式)，但比这更早的是，你可以在最后的body标签之前的script标签中直接放置代码(这就是YUI和Google Closure的建议)，像这样：

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

在这一点上，位于该脚本标签之上的所有内容都可以在DOM中使用。

因此，按照发生的顺序，您有以下选项：

最早：在关闭body标签之前的script标签中调用函数。此时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模板。)