Javascript 在身体加载完成 js/jquery 时触发事件

Trigger event on body load complete js/jquery

提问by pravin

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

我想使用 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.

如果您有任何参考，请建议人们。

回答by T.J. Crowder

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

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

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

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

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

So your options in order of occurrence:

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

1. Earliest: Function call in scripttag just before closing the bodytag. The DOM isready 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.readycallback (and its shortcut forms).

3. Late, after allpage elements including images are fully loaded: windowonloadevent.

1. 最早：script在关闭body标签之前在标签中调用函数。此时 DOM已准备就绪（根据 Google Closure 人员的说法，他们应该知道；我还在一堆浏览器上对其进行了测试）。

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

3. 晚，在包括图像在内的所有页面元素完全加载后：windowonload事件。

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

这是一个活生生的例子：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>

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

（是的，我本可以使用 jQuery 作为display函数，但我是从非 jQuery 模板开始的。）

回答by BrunoLM

When the page loads totally (dom, images, ...)

当页面完全加载时（dom，图像，...）

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

When DOM elements load (not necessary all images will be loaded)

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

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

Then you can trigger any event

然后你可以触发任何事件

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

回答by Sarfraz

jQuery:

jQuery：

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

If you want to run your code after all page resources including images/frames/DOM have loaded, you need to use loadevent:

如果你想在所有页面资源（包括图像/框架/DOM）加载后运行你的代码，你需要使用load事件：

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

JavaScript:

JavaScript：

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

回答by Coin_op

The windows.load function is useful if you want to do something when everything is loaded.

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

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

But you can also use the .load function on any other element. So if you have one particularly large image and you want to do something when that loads but the rest of your page loading code when the dom has loaded you could do:

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

$(function(){
    // Dom loaded code

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

Also the jquery .load function is pretty much the same as a normal .onload.

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

回答by Raynos

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

This will trigger once the DOM structure is ready.

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

回答by mgamer

Isn't

是不是

  $(document).ready(function() {

  });

what you are looking for?

你在找什么？

回答by rahim asgari

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

回答by rugk

You may also usethe deferattribute in the scripttag. As long as you do not specify asyncwhich would of course not be useful for your aim.

您也可以在标签中使用该defer属性script。只要您不指定async哪个当然对您的目标没有用。

Example:

例子：

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

As described here:

如此处所述：

In the above example, the browser will download both scripts in parallel and execute them just before DOMContentLoaded fires, maintaining their order.

[...] deferred scripts should run after the document had parsed, in the order they were added [...]

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

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

Related Stackoverflow discussions: How exactly does <script defer=“defer”>work?

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

回答by Nikunj K.

This will call function when the DOM structure is ready

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