動態加載js


在前端按需加載js是優化性能的一個方向,

現在script標簽加載js基本是異步的,為了減少白屏可以在頁面body加載完之后再去按需加載js,script也是標簽所以我們可以像img等標簽一樣去使用它,下面是封裝的函數,利用回調可以控制js的執行順序,

function loadScript(url,callback) {
        var script=document.createElement("script");
        script.type="text/javascript";
        if(script.readyState){  // ie游覽器
            script.onreadystatechange=function () {
                if(script.readyState=="loaded" || script.readyState=="complete"){
                    script.onreadystatechange=null;
                    callback();
                }
            }
        }else { //其他
            script.onload=function () {
                callback();
            }
        };
        script.src=url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

 就可以快速的使用了

loadScript('http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js',function () {
        console.log($)
    })

  但這種方法對於需要加載很多js的頁面來說很不方便,可以使用現在流行的模塊化按需引入。

 


免責聲明!

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



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