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