在頁(yè)面所有元素加載完成之后執行某個(gè)js函數
做項目的時(shí)候可能會(huì )遇到這種情況:
一個(gè)JSP頁(yè)面中import了一個(gè)目錄文件(menu.jsp),而且每個(gè)頁(yè)面的<body>中都定義了onload事件,那么在此定義window.onload函數的時(shí)候可能會(huì )不生效或者多個(gè)onload之間覆蓋的現象.
有的朋友肯定會(huì )說(shuō)用jQuery的$().ready(function(){}),或者(function(){})這種方式, 其實(shí)這個(gè)函數和javascript的onload事件是由區別的,那么來(lái)看看他們的區別:
他們的主要的區別有兩點(diǎn)：
- 執行時(shí)機
window.onload方法是在網(wǎng)頁(yè)中的所有的元素（包括元素的所有關(guān)聯(lián)文件）都完全加載到瀏覽器之后才執行。而通過(guò)jQuery中的$(document).ready()方法注冊的事件處理程序，只要在DOM完全就緒時(shí)，就可以調用了，比如一張圖片只要<img>標簽完成，不用等這個(gè)圖片加載完成，就可以設置圖片的寬高的屬性或樣式等。 - $(document).ready()方法可以多次使用而注冊不同的事件處理程序，而window.onload一次只能保存對一個(gè)函數的引用，多次綁定函數只會(huì )覆蓋前面的函數。
先來(lái)看window.onload方法在一個(gè)頁(yè)面上注冊?xún)纱螘?huì )是什么樣的結果：
- function one(){
- alert("one");
- }
- function two(){
- alert("two");
- }
- window.onload = two ;
- window.onload = one ;
上面的代碼運行后，會(huì )彈出“one”。
再來(lái)看看$(document).ready()方法分兩次調用會(huì )是什么結果。
- function one(){
- alert("one");
- }
- function two(){
- alert("two");
- }
- $(document).ready(function(){
- one();
- });
- $(document).ready(function(){
- two();
- });
好了,比較完了,也就是說(shuō)window.onload和jQuery的方式都無(wú)法實(shí)現,所以有了下面的實(shí)現:
- var $$ = function(func){
- if (document.addEventListener) {
- window.addEventListener("load", func, false);
- }
- else if (document.attachEvent) {
- window.attachEvent("onload", func);
- }
- }
-
- $$(function(){
- show();
- })
$$(function(){...此處加上需要執行的內容...});即可...
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
