關於身體負載完成的觸發事件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(); 
      } 
     } });