[f]动态判断js加载完成
生活随笔
收集整理的這篇文章主要介紹了
[f]动态判断js加载完成
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在正常的加載過程中，js文件的加載是同步的，也就是說在js加載的過程中，瀏覽器會阻塞接下來的內(nèi)容的解析。這時候，動態(tài)加載便顯得尤為重要了，由于它是異步加載，因此，它可以在后臺自動下載，并不會妨礙其它內(nèi)容的正常解析，由此，便可以提高頁面首次加載的速度。
那么，既然js是異步加載，我們又該如何判斷它是否加載完成呢？
?
在IE或一些基于IE內(nèi)核的瀏覽器中（如Maxthon）,它是通過script節(jié)點的readystatechange方法來判斷的，而其它的一些瀏覽器中，往往是通過load事件來決定的，如下代碼：
function include_js(file) {var _doc = document.getElementsByTagName('head')[0];var js = document.createElement('script');js.setAttribute('type', 'text/javascript');js.setAttribute('src', file);if (document.all) { js.onreadystatechange = function() { if (js.readyState == 'loaded' || js.readyState == 'complete') { alert('IE6、IE7 support js.onreadystatechange'); } } } else { js.onload = function() { alert('Firefox、chrome and others support js.onload'); } } } include_js('http://static2.baihe.com/js/finallyBaiheHead.js?time=20141120');
?
我們把該方法添加到body的load事件中，<body οnlοad='dynamicLoad()'>，運行，會發(fā)現(xiàn)IE或Maxthon中，會彈出‘done’對話框，但是firefox或chrome中卻完全沒有反應，why?
這是因為，如果script節(jié)點沒有添加到DOM樹中，那么在chrome和firefox中是不會響應script的load事件的。但是IE中卻可以。。修改后如下代碼：
function include_js(file) {var _doc = document.getElementsByTagName('head')[0];var js = document.createElement('script');js.setAttribute('type', 'text/javascript');js.setAttribute('src', file);_doc.appendChild(js);if (document.all) {js.onreadystatechange = function() {if (js.readyState == 'loaded' || js.readyState == 'complete') {alert('IE6、IE7 support js.onreadystatechange');}}} else {js.onload = function() {alert('Firefox、chrome and others support js.onload');}} } include_js('http://static2.baihe.com/js/finallyBaiheHead.js?time=20141120');?
轉(zhuǎn)載于:https://www.cnblogs.com/niubenbit/p/4110717.html
總結(jié)
以上是生活随笔為你收集整理的[f]动态判断js加载完成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windows 2008R2 无法安装操
- 下一篇： Js时间戳转为日期格式