JavaScript异步加载

迈不过友情╰ 2022-05-19 02:48 401阅读 0赞

javascript 异步加载的三种方案

1. defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。

2. async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 （不兼容IE9以下）

3. 创建script，插入到DOM中，加载完毕后callBack

异步加载JS并执行兼容性写法：

方式一

需要被加载的工具函数中所有的方法都是写在一个交 “tools”的对象中。

  1. function loadScript(url, callback){
  2.     var script = document.createElement('script');
  3.      script.type = "text/javascript";
  4.      //先绑定监听
  5.     if(script.readyState) {    //兼容IE
  6.         script.onreadystatechange = function () {
  7.             if(script.readyState == 'complete' || script.readyState == 'loaded') {
  8.                 tools[callback]();    //执行callback函数，要求工具函数以都包在“tools”对象中
  9.             }
  10.         }
  11.     } else {
  12.         script.onload = function () {
  13.             //chrome firefox safari oprea
  14.             tools[callback]();
  15.         }
  16.     }
  17.     script.src = url;    //当执行到这一行代码时就开始下载srcipt脚本了
  18.     document.head.appendChild(script);    //当执行到这里时代码被写入到文档中，如果下载好了就开始执行
  19. }

测试：

调用方式： 调用loadScript（）方法，函数名通过字符串形式传入

  1. loadScript('tools.js', 'test')

被加载的script文件命名为“tools.js”, 加载完被执行的函数为 test()

  1. var tools = {
  2.     test: function () {
  3.         alert('我加载完成并执行了。')
  4.     },
  5.     demo: function(){
  6.         //...
  7.     }
  8. }

测试结果： 正确加载并执行

70

方式二

被加载的异步JavaScript代码不需要被一个变量封装起来，但调用方式有变化

  1. function loadScript(url, callback){
  2.     var script = document.createElement('script');
  3.      script.type = "text/javascript";
  4.      //先绑定监听
  5.     if(script.readyState) {    //兼容IE
  6.         script.onreadystatechange = function () {
  7.             if(script.readyState == 'complete' || script.readyState == 'loaded') {
  8.                 callback && callback();     //在这里执行callback
  9.             }
  10.         }
  11.     } else {
  12.         script.onload = function () {
  13.             //chrome firefox safari oprea
  14.             callback && callback();         //在这里执行callback
  15.         }
  16.     }
  17.     script.src = url;    //当执行到这一行代码时就开始下载srcipt脚本了
  18.     document.head.appendChild(script);    //当执行到这里时代码被写入到文档中，如果下载好了就开始执行
  19. }

调用方式需要注意一下，通过一个匿名函数来包装还未到达的test()方法。

  1. loadScript('tools.js', function(){
  2.     test();
  3. })

tools.js 只需要直接写方法就好

  1. function test () {
  2.     alert('我加载完成并执行了。')
  3. }

测试结果： 正确加载并执行

70

发表评论

表情：
评论列表 （有 0 条评论，401人围观）

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

相关阅读

    相关 同步加载与异步加载

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

    系统管理员系统管理员/ 0 赞/ 421 阅读

    相关 JavaScript异步加载

    同步加载的问题 　　默认的js是同步加载的，这里的“加载”可以理解成是解析、执行，而不是“下载”，在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻

    深碍√TFBOYSˉ_深碍√TFBOYSˉ_/ 0 赞/ 420 阅读

    相关 JavaScript-异步加载

    同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。  js 之所以要同步执行，是因为 js 中可能有输出 

    分手后的思念是犯贱分手后的思念是犯贱/ 0 赞/ 388 阅读