异步加载JS

Posted 夜里码码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了异步加载JS相关的知识,希望对你有一定的参考价值。


异步加载JS


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步加载js</title>
</head>
<body>
    <script>
    //异步加载JS函数
    // 实现思想:动态创建script标签,插入到文档中,然后执行callback函数
    //url为请求的JS文件的地址,callback为请求成功时的回调函数
    function loadScript(url,callback){
        //动态创建script标签
        var script = document.createElement("script");
        script.type = "text/javascript";
        //判断外部的JS文件是否加载完成(此处需要解决浏览器的兼容问题)
        if(script.readyState){
            script.onreadystatechange = function(){
                if(script.readyState == ‘loaded‘ || script.readyState == ‘complete‘){
                    script.onreadystatechange = null;
                    callback();
                }
            }
        }else{
                script.onload = function(){
                    callback();
            }
        }
        script.src = url;
        //执行脚本文件
        document.body.appendChild(script);
    }
    //调试程序
    // loadScript("1.js",function(){
    //  test();
    // });
    </script>
    
</body>
</html>

以上是关于异步加载JS的主要内容,如果未能解决你的问题,请参考以下文章

如何延迟或异步此 WordPress javascript 片段以最后加载以加快页面加载时间?

异步任务片段背景数据

关于js----------------分享前端开发常用代码片段

ES7-Es8 js代码片段

Chrome-Devtools代码片段中的多个JS库

angularJS使用ocLazyLoad实现js延迟加载