window.onload 加載完畢的問題及解決方案(上)
更新時(shí)間:2009年07月09日 23:38:08 作者:
我們經(jīng)常使用 window.onload 來處理頁面,當(dāng)頁面加載完成做一些事情。但這個(gè) window.onload 是頁面全部加載完成,甚至包括圖片,而我們實(shí)際上經(jīng)常需要的是文檔 DOM 加載完畢!
解決方法,
一、Mozilla 提供了一個(gè)非公開的(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 代碼,因此,你可以有兩種辦法來屏蔽非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è)非公開的(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 代碼,因此,你可以有兩種辦法來屏蔽非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 加載完畢的問題及解決方案(下)
- 頁面中body onload 和 window.onload 沖突的問題的解決
- window.onload的頁面加載技巧
- window.onload綁定多個(gè)事件的兩種解決方案
相關(guān)文章
JS鼠標(biāo)滑過圖片時(shí)切換圖片實(shí)現(xiàn)思路
在瀏覽網(wǎng)頁時(shí)會(huì)看到這樣的效果:當(dāng)鼠標(biāo)滑過一張圖片后,這張圖片切換為了另外的一張圖片,下面為大家介紹下具體是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過2013-09-09微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)跑馬燈效果完整代碼(附效果圖),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)批量倒計(jì)時(shí)功能,適用于商品列表倒計(jì)時(shí),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06js點(diǎn)擊button按鈕跳轉(zhuǎn)到另一個(gè)新頁面
點(diǎn)擊按鈕怎么跳轉(zhuǎn)到另外一個(gè)頁面呢?點(diǎn)擊圖片要跳轉(zhuǎn)到新的頁面時(shí),怎么做到呢?可以使用onclick=window.location=新頁面來實(shí)現(xiàn)2014-10-10JavaScript中的isXX系列是否繼續(xù)使用的分析
我們很容易被漂亮的代碼吸引,也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不,我就收集了一系列形如 “是否為……?” 的判斷的boolean函數(shù)。2011-04-04JavaScript?split()方法定義及更多實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript?split()方法定義及更多實(shí)例的相關(guān)資料,js里的split()方法大家都知道用于將字符串轉(zhuǎn)化為字符串?dāng)?shù)組,文中通過代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03