如何讓頁(yè)面加載完成后執(zhí)行js
在很多情況下，js代碼需要設(shè)置為在頁(yè)面加載之后才去執(zhí)行，如果在頁(yè)面沒(méi)有加載完畢就執(zhí)行js代碼，很容易出現(xiàn)報(bào)錯(cuò)情況，因?yàn)轫?yè)面中的某些dom根本沒(méi)有加載完畢。本文章向大家介紹如何讓js腳本在頁(yè)面加載完后再執(zhí)行的幾種方法。需要的朋友可以參考一下。
javascript 當(dāng)頁(yè)面dom模型加載完成后才執(zhí)行javascript
不能使用<body onload="">
加上 defer 等于在頁(yè)面完全在入后再執(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>無(wú)標(biāo)題文檔</title>
</head>
<body>
<script defer="defer">
alert("頁(yè)面加載完我才執(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文檔樹(shù)加載完之后執(zhí)行一個(gè)函數(shù)（注意，這里面的文檔樹(shù)加載完不代表全部文件加載完）。
而window.onload是在dom文檔樹(shù)加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)。也就是說(shuō)$(document).ready要比window.onload先執(zhí)行。
那么Jquery里面$(document).ready函數(shù)的內(nèi)部是怎么實(shí)現(xiàn)的呢？下面我們就來(lái)看看：
我們來(lái)為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è)賮?lái)驗(yàn)證一下最上面所說(shuō)的“ready要比onload先執(zhí)行”：
window.onload = function () {
alert('onload');
};
document.ready(function () {
alert('ready');
});
執(zhí)行這段代碼之后，你會(huì)看到瀏覽器里面會(huì)先彈出“ready”,在彈出onload。
這個(gè)大家還是親手試試吧！
相關(guān)文章
本篇文章給大家詳細(xì)介紹了JavaScript中EventLoop的相關(guān)知識(shí)，有這方面需要的朋友參考學(xué)習(xí)下。2018-01-01
Bootstrap每天必學(xué)之按鈕（Button）插件
Bootstrap每天必學(xué)之按鈕（Button）插件,通過(guò)按鈕（Button）插件，您可以添加進(jìn)一些交互，比如控制按鈕狀態(tài)，或者為其他組件（如工具欄）創(chuàng)建按鈕組，感興趣的小伙伴們可以參考一下2016-04-04
微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)YDUI的ScrollNav組件，滾動(dòng)導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
JavaScript實(shí)現(xiàn)英語(yǔ)單詞題庫(kù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)英語(yǔ)單詞題庫(kù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了如何在JS數(shù)組特定索引處指定位置插入元素？將一個(gè)元素插入到現(xiàn)有數(shù)組的特定索引處，需要的朋友可以參考下2014-08-08
javascript是基于原型(Prototype based)的面向?qū)ο蟮恼Z(yǔ)言，這點(diǎn)不同于我們熟悉的.NET，Java語(yǔ)言，是基于類模式(Class based)。2010-03-03
JavaScript實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)文本功能
這篇文章主要為大家詳細(xì)介紹了JavaScript自動(dòng)跳轉(zhuǎn)文本功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js漢字排序問(wèn)題 支持中英文混排，兼容各瀏覽器，包括CHROME
這套排序機(jī)制同時(shí)兼容了IE和ff 可以實(shí)現(xiàn)所有瀏覽器下排序的統(tǒng)一哦2011-12-12
