在很多情況下，js代碼需要設(shè)置為在頁面加載之后才去執(zhí)行，如果在頁面沒有加載完畢就執(zhí)行js代碼，很容易出現(xiàn)報錯情況，因?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" 那么會先執(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)部是怎么實(shí)現(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ù)是實(shí)現(xiàn)了。我們再來驗(yàn)證一下最上面所說的“ready要比onload先執(zhí)行”：
window.onload = function () { alert('onload'); }; document.ready(function () { alert('ready'); });執(zhí)行這段代碼之后，你會看到瀏覽器里面會先彈出“ready”,在彈出onload。
這個大家還是親手試試吧！
新聞熱點(diǎn)
疑難解答
