window.onload 加載完畢的問(wèn)題及解決方案（上）
更新時(shí)間：2009年07月09日 23:38:08 作者：
我們經(jīng)常使用 window.onload 來(lái)處理頁(yè)面，當(dāng)頁(yè)面加載完成做一些事情。但這個(gè) window.onload 是頁(yè)面全部加載完成，甚至包括圖片，而我們實(shí)際上經(jīng)常需要的是文檔 DOM 加載完畢！
解決方法，
一、Mozilla 提供了一個(gè)非公開(kāi)的(undocumented)函數(shù)：
// for Mozilla browsers
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
二、對(duì)于 IE 瀏覽器，可以使用IE特有的 defer 屬性：
<script defer type="text/javascript">
alert("DOM 加載完畢！")
</script>
具有defer屬性的腳本塊會(huì)在DOM 加載完畢后執(zhí)行。
非IE瀏覽器會(huì)忽略 defer 而直接執(zhí)行 script 代碼，因此，你可以有兩種辦法來(lái)屏蔽非IE瀏覽器執(zhí)行這段針對(duì)IE的代碼：
1.條件注釋
<!--[if IE]>
<script defer type="text/javascript">
alert("DOM 加載完畢！")
</script>
<![endif]-->
2.條件編輯
<script defer type="text/javascript">
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
alert("DOM 加載完畢！");
/*@end @*/
</script>
三、對(duì)于Safari，這里有一個(gè)jQuery的解決方案：
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); // call the onload handler
}
}, 10);
}
一、Mozilla 提供了一個(gè)非公開(kāi)的(undocumented)函數(shù)：
復(fù)制代碼 代碼如下:
// for Mozilla browsers
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
二、對(duì)于 IE 瀏覽器，可以使用IE特有的 defer 屬性：
復(fù)制代碼 代碼如下:
<script defer type="text/javascript">
alert("DOM 加載完畢！")
</script>
具有defer屬性的腳本塊會(huì)在DOM 加載完畢后執(zhí)行。
非IE瀏覽器會(huì)忽略 defer 而直接執(zhí)行 script 代碼，因此，你可以有兩種辦法來(lái)屏蔽非IE瀏覽器執(zhí)行這段針對(duì)IE的代碼：
1.條件注釋
復(fù)制代碼 代碼如下:
<!--[if IE]>
<script defer type="text/javascript">
alert("DOM 加載完畢！")
</script>
<![endif]-->
2.條件編輯
復(fù)制代碼 代碼如下:
<script defer type="text/javascript">
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
alert("DOM 加載完畢！");
/*@end @*/
</script>
三、對(duì)于Safari，這里有一個(gè)jQuery的解決方案：
復(fù)制代碼 代碼如下:
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); // call the onload handler
}
}, 10);
}
您可能感興趣的文章:
- 淺析document.ready和window.onload的區(qū)別講解
- JS:window.onload的使用介紹
- jquery $(document).ready() 與window.onload的區(qū)別
- jquery中的$(document).ready()與window.onload的區(qū)別
- js window.onload 加載多個(gè)函數(shù)的方法
- window.onload 加載完畢的問(wèn)題及解決方案（下）
- 頁(yè)面中body onload 和 window.onload 沖突的問(wèn)題的解決
- window.onload的頁(yè)面加載技巧
- window.onload綁定多個(gè)事件的兩種解決方案
相關(guān)文章
搜索框無(wú)論是在電商網(wǎng)站還是小程序中都很常見(jiàn)，這篇文章主要就為大家詳細(xì)介紹了小程序如何實(shí)現(xiàn)搜索框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
EditPlus注冊(cè)碼生成器(js代碼實(shí)現(xiàn))
在線的EditPlus注冊(cè)碼生成器，看了看還真是，在這里exe的注冊(cè)機(jī)病毒太多，純js的在線注冊(cè)機(jī)可就放心了，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序模版渲染的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了javascript順序加載圖片的方法,可實(shí)現(xiàn)javascript針對(duì)圖片的逐次加載,從而減緩服務(wù)器壓力,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-07-07
利用javascript實(shí)現(xiàn)全部刪或清空所選的操作
這篇文章主要介紹了利用javascript實(shí)現(xiàn)全部刪或清空所選的操作,需要的朋友可以參考下2014-05-05
JavaScript數(shù)組及常見(jiàn)操作方法小結(jié)
這篇文章主要介紹了JavaScript數(shù)組及常見(jiàn)操作方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組的基本獲取、添加、刪除、排序、翻轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
js實(shí)現(xiàn)每日自動(dòng)換一張圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)每日自動(dòng)換一張圖片的方法,涉及javascript操作圖片與日期的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
不用window.print實(shí)現(xiàn)的打印效果代碼。2009-03-03
js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
這篇文章主要介紹了js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法,涉及JavaScript針對(duì)select下拉列表選擇操作的相關(guān)技巧,需要的朋友可以參考下2015-12-12
js截取中英文字符串、標(biāo)點(diǎn)符號(hào)無(wú)亂碼示例解讀
這篇文章主要介紹了如何js截取中英文字符串、標(biāo)點(diǎn)符號(hào)無(wú)亂碼,需要的朋友可以參考下2014-04-04