如何讓頁面加載完成后執(zhí)行js
在很多情況下，js代碼需要設(shè)置為在頁面加載之后才去執(zhí)行，如果在頁面沒有加載完畢就執(zhí)行js代碼，很容易出現(xiàn)報(bào)錯(cuò)情況，因?yàn)轫撁嬷械哪承ヾom根本沒有加載完畢。本文章向大家介紹如何讓js腳本在頁面加載完后再執(zhí)行的幾種方法。需要的朋友可以參考一下。
javascript 當(dāng)頁面dom模型加載完成后才執(zhí)行javascript
不能使用<body onload="">
加上 defer 等于在頁面完全在入后再執(zhí)行，相當(dāng)于 window.onload ，但應(yīng)用上比 window.onload 更靈活
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<script defer="defer">
alert("頁面加載完我才執(zhí)行的")
</script>
先看到這段話 然后再執(zhí)行上面的 JS 如果去掉上面的 defer="defer" 那么會(huì)先執(zhí)行JS 在看到這段話
</body>
</html>
方法1：使用defer
<script defer="defer" language="javascript"></script>
//或者
<script defer language="javascript"></script>
但這種方法只有IE支持，其他瀏覽器不識(shí)別defer 這種方法不靠譜
方法2：window.onload
<script type=”text/javascript”>
window.onload=function (){
var userName=”xiaoming”;
alert(userName);
}
</script>
但這個(gè)方法在IE中只能在一個(gè)地方調(diào)用，假如2個(gè)地方調(diào)用，后面調(diào)用的就會(huì)把前面的添加的覆蓋掉；
方法3：jQuery方法，需要引用jQuery文件。
<script type=”text/javascript”>
$(document).ready(function (){
var userName=”xiaoming”;
alert(userName);
});
</script>
下面我們介紹一下Window.onload=function (){}與$(document).ready(function (){})的區(qū)別：
在Jquery里面，我們可以看到兩種寫法:$(function(){}) 和$(document).ready(function(){})
這兩個(gè)方法的效果都是一樣的，都是在dom文檔樹加載完之后執(zhí)行一個(gè)函數(shù)（注意，這里面的文檔樹加載完不代表全部文件加載完）。
而window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)。也就是說$(document).ready要比window.onload先執(zhí)行。
那么Jquery里面$(document).ready函數(shù)的內(nèi)部是怎么實(shí)現(xiàn)的呢？下面我們就來看看：
我們來為document添加一個(gè)ready函數(shù)：
document.ready = function (callback) {
///兼容FF,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false)
}
//兼容IE
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
document.ready這個(gè)函數(shù)是實(shí)現(xiàn)了。我們?cè)賮眚?yàn)證一下最上面所說的“ready要比onload先執(zhí)行”：
window.onload = function () {
alert('onload');
};
document.ready(function () {
alert('ready');
});
執(zhí)行這段代碼之后，你會(huì)看到瀏覽器里面會(huì)先彈出“ready”,在彈出onload。
這個(gè)大家還是親手試試吧！
相關(guān)文章
基于JavaScript實(shí)現(xiàn)滑動(dòng)門效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動(dòng)門效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
js局部刷新頁面時(shí)間具體實(shí)現(xiàn)
這篇文章介紹了js局部刷新頁面時(shí)間具體實(shí)現(xiàn)，需要的朋友可以參考一下2013-07-07
經(jīng)常用到對(duì)xml的操作，Java里面有dom和dom4j等工具類，但是Javascript就沒有，所以自己寫了一個(gè)，目前算作第一個(gè)版本吧?？隙ㄟ€有很多地方需要改進(jìn)，如果有需要用的朋友，可以把bug和需要完善改進(jìn)的地方留言或評(píng)論。2009-10-10
刷新頁面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行
這篇文章主要介紹了刷新頁面后讓控制臺(tái)的js代碼繼續(xù)執(zhí)行，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript控制table某列不顯示的方法,涉及javascript操作表單的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03![[js高手之路]設(shè)計(jì)模式系列課程-發(fā)布者,訂閱者重構(gòu)購(gòu)物車的實(shí)例](http://img.jbzj.com/images/xgimg/bcimg5.png)
[js高手之路]設(shè)計(jì)模式系列課程-發(fā)布者,訂閱者重構(gòu)購(gòu)物車的實(shí)例
下面小編就為大家?guī)硪黄猍js高手之路]設(shè)計(jì)模式系列課程-發(fā)布者,訂閱者重構(gòu)購(gòu)物車的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Bootstrap組件系列之福利篇幾款好用的組件(推薦) 的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript內(nèi)存泄漏的編程模式,并提供一些內(nèi)存管理的改進(jìn)方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-10-10
JS實(shí)現(xiàn)類似51job上的地區(qū)選擇效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)類似51job上的地區(qū)選擇效果,結(jié)合完整實(shí)例形式分析了javascript基于鼠標(biāo)事件響應(yīng)實(shí)現(xiàn)頁面元素動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
uniapp是一個(gè)使用html5標(biāo)準(zhǔn)的,一次開發(fā),可以發(fā)布到安卓,ios,小程序的多端框架,非常方便,下面這篇文章主要給大家介紹了關(guān)于uniapp如何編寫含有后端的登錄注冊(cè)頁面的相關(guān)資料,需要的朋友可以參考下2023-05-05