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