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