动态加载js的异步与同步方法

深藏阁楼爱情的钟 2023-07-19 12:19 74阅读 0赞

同步加载（会阻塞后续代码执行）

loadAsyncScript(src, callback = function () {}) { // 同步加载js
            const head = document.getElementsByTagName('head')[0];
            const script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', src);
            script.setAttribute('async', true);
            script.setAttribute('defer', true);
            head.appendChild(script);
    
            if (script.readyState) { // ie
                script.onreadystatechange = function () {
                    var state = this.readyState;
                    if (state === 'loaded' || state === 'complete') {
                        callback();
                    }
                }
            } else {
                script.onload = function () {
                    callback();
                }
            }
        },

异步加载JS

loadJS(src) { // 异步加载js
            const s = document.createElement('script');
            s.setAttribute('src', src);
            s.setAttribute('charset', 'utf-8');
            document.body.appendChild(s);
        },

使用例子

loadAsyncScript("__SYS_GLOBAL_URL__static/app/js/tvp.player_v2_zepto.js", function () {
                loadAsyncScript("__SYS_GLOBAL_URL__static/app/js/video.js", function () {
                    _player = new MyPlayer(pageGlobal)
                });
            });

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts异步数据的加载与动态更新

方法一 var myChart = echarts.init(document.getElementById('main')); $.get('

比眉伴天荒/ 2023年09月29日 16:16/ 0 赞/ 95 阅读

相关动态加载js的异步与同步方法

同步加载（会阻塞后续代码执行） loadAsyncScript(src, callback = function () {}) { // 同步加载js

深藏阁楼爱情的钟/ 2023年07月19日 12:19/ 0 赞/ 75 阅读

相关 JS异步加载的方式

方法一：Script Dom Element <table> <tbody> <tr> <td> <p>1</p> <p>2</p> <p>3</p>

野性酷女/ 2023年03月01日 13:26/ 0 赞/ 121 阅读

相关 JS_js动态加载js文件和css 文件同步/异步两种方式

方法一 /动态添加js或css,URL:文件路径，FileType：文件类型(js/css)/ function AddJsFiles(URL,FileT

落日映苍穹つ/ 2022年11月21日 14:59/ 0 赞/ 315 阅读

相关同步加载与异步加载

这几天一直在忙项目上线的问题，碰到了好多问题,比如异步加载、事件冒泡、浏览器缓存。这篇文章主要是文件的同步加载和异步加载。先说下我碰到的问题：项目要接入到支付宝城市服务中，

系统管理员/ 2022年07月14日 12:14/ 0 赞/ 385 阅读

相关 JS异步加载

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载，用到再加载，

Myth丶恋晨/ 2022年06月17日 07:49/ 0 赞/ 508 阅读

相关 JS异步加载和延迟加载

1、异步加载的方案：动态插入script标签 1）通过ajax去获取js代码，然后通过eval执行 2）script标签上添加defer或者async属性

绝地灬酷狼/ 2022年06月08日 06:17/ 0 赞/ 792 阅读

相关 js实现动态加载脚本的方法

首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下： [?][Link 1]

叁歲伎倆/ 2022年06月07日 00:19/ 0 赞/ 342 阅读

相关 js异步加载的问题

js异步加载的问题本地测试无任何问题,但是放到服务器上开始报错,经检查是js加载出现了异步问题. 当时采用的是动态加载js的方式,如下:

偏执的太偏执、/ 2022年05月17日 03:53/ 0 赞/ 367 阅读

相关动态按需异步加载js文件

<script type="text/javascript"> function YY(data) \{ execScr

迈不过友情╰/ 2021年12月08日 20:07/ 0 赞/ 498 阅读