js判斷異步引入的js文件是否加載完畢

時間 2019-12-04

原文原文鏈接

　　在正常的加載過程當中，js的加載都是同步的，也就是在加載過程當中，瀏覽器會阻塞接下來的內容的加載。這時候咱們就要用到動態加載，動態加載是異步的，若是咱們在後邊要用到這個動態加載的js文件裏的東西，就要保證這個文件加載完成後，再執行下面的內容。javascript

　　如何判斷js是否加載完成？（實現loadScript(url,callback)異步加載腳本，完成後執行回調函數，要求支持IE）html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js判斷異步引入的js文件是否加載完畢</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<p onclick="loadScript('ocrad.js',null);">js如何判斷異步引入的js文件是否加載完畢</p>
    
<script type="text/javascript">
    function loadScript(url,callback){
        //可是，這種加載方式在加載執行完以前會阻止 onload 事件的觸發
        var _doc=document.getElementsByTagName('head')[0]; //獲取head頭部標籤元素對象。
        var script=document.createElement('script');       //建立一個script標籤元素。
　　　　script.setAttribute('type','text/javascript');     //設置script標籤的type屬性。 script.type='text/javascript'
　　　　//script.async='async';
　　　　script.setAttribute('src',url);                    //   script.src=url;
        script.setAttribute('async','true');
        _doc.appendChild(script);                          //將script標籤附加到head標籤中，不然只可以在IE11如下瀏覽器可以完成判斷。
        script.onload=script.onreadystatechange=function(){
            if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                console.log('js onload');
            }
            script.onload=script.onreadystatechange=null;     //刪除事件處理函數。
        }
    }
    
    //解決了阻塞 onload 事件觸發的問題 ，不是當即開始異步加載 js ，而是在 onload 時纔開始異步加載。
    if (window.attachEvent)
         window.attachEvent('onload', function(){loadScript('ocrad.js',null);});
     else
         window.addEventListener('load', function(){loadScript('ocrad.js',null);}, false);</script>
</body>
</html>

http://www.javashuo.com/article/p-dloglayf-cn.htmlchrome

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。