JS動態創建script,插入到DOM中,異步加載,兼容IE


JS異步加載的方式有三種,我這里介紹最好的一種,另外兩種你們可以自行查詢解決(因為他們都有兼容性問題)

這樣做執行js時也不阻塞頁面,不但支持異步加載,提高頁面加載速度,還支持按需加載。

這里我封裝一個函數  傳入你要加載的js路徑地址,並且計划加載完成后調用里面的某個方法函數

function loadScript (url,callback){
        var script = document.createElement('script');
        script.type = "text/javascript";
        if (script.readyState) { // 如果有這個屬性就是IE瀏覽器
            // 這個函數只有IE瀏覽器才有,當JS文件被下載完成后就會被觸發
            script.onreadystatechange = function() {
                // 當條件滿足 表示JS文件以及被下載完成 可以被調用了
                if (script.readyState == 'complete' || script.readyState == 'loaded') {
                    if(callback){
                        callback()
                    }
                }
            }
        } else { // 其他主流瀏覽器
            script.onload = function() { // 瀏覽下載完成js后 執行onload回調,此時就可以訪問JS文件的函數和變量了
                if(callback){
                    callback()
                }
            }
        }
        script.src = url; // 這一句執行完成,系統就會去下載這個地址里的東西,並且也是異步的去下載
        document.head.appendChild(script); // 當吧script插入
    }
    loadScript('a.js',function(){
        asyhello() // 加載完成后 立即執行當前加載的js里的這個函數
    })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM