动态同步加载JS脚本

最新推荐文章于 2024-06-17 07:30:22 发布
最新推荐文章于 2024-06-17 07:30:22 发布
阅读量1.1k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juelingfeng/article/details/38416685
版权
脚本：
  1. <script type="text/javascript">
  2. (function () {
  3.     dsLoadingJS = {
  4.         //获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
  5.         getXmlHttpRequest: function () {
  6.             if (window.XMLHttpRequest) // 除了IE外的其它浏览器
  7.                 return new XMLHttpRequest();
  8.             else if (window.ActiveXObject) // IE 
  9.                 return new ActiveXObject("MsXml2.XmlHttp");
  10.         },

  12.         //导入内容
  13.         includeJsText: function (rootObject, jsText) {
  14.             if (rootObject != null) {
  15.                 var oScript = document.createElement_x("script");
  16.                 oScript.type = "text/javascript";
  17.                 oScript.text = jsText;
  18.                 rootObject.appendChild(oScript);
  19.             }
  20.         },

  22.         //导入文件
  23.         includeJsSrc: function (rootObject, fileUrl) {
  24.             if (rootObject != null) {
  25.                 var oScript = document.createElement_x("script");
  26.                 oScript.type = "text/javascript";
  27.                 oScript.src = fileUrl;
  28.                 rootObject.appendChild(oScript);
  29.             }
  30.         },

  32.         //同步加载
  33.         addJs: function (rootObject, url) {
  34.             var oXmlHttp = this.getXmlHttpRequest();

  36.             oXmlHttp.onreadystatechange = function ()  //其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到        
  37.             {
  38.                 if (oXmlHttp.readyState == 4) //当执行完成以后(返回了响应)所要执行的        
  39.                 {
  40.                     if (oXmlHttp.status == 200 || oXmlHttp.status == 304) //200有读取对应的url文件,404表示不存在这个文件        
  41.                     {
  42.                         this.includeJsSrc(rootObject, url);
  43.                     }
  44.                     else {
  45.                         alert('XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')');
  46.                     }
  47.                 }
  48.             }

  50.             //1.True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
  51.             //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
  52.             oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"></script>',ff不会  
  53.             oXmlHttp.send(null);
  54.             this.includeJsText(rootObject, oXmlHttp.responseText);
  55.         }
  56.     }
  57. })();
  58. </script>

调用方法：
  1. <body>
  2.      <div id="divID"></div>
  3.      <script type="text/javascript">
  4.          var rootObject = document.getElementByIdx_x("divID");
  5.          dsLoadingJS.addJs(rootObject, "skin.js");                                                          //dsLoadingJS.addJs(rootObject,"http://www.sina.com.cn/article/skin.js"); 
  6.     </script>
  7. </body>
绝凌峰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript文件的同步和异步加载的实现代码
10-19
本篇文章主要介绍了JavaScript文件的同步和异步加载的实现代码，具有一定的参考价值，有兴趣的可以了解一下
JS同步加载以及异步加载的三种方式
m0_47191887的博客
04-04 2582
JS同步加载 同步加载就是一种我们最常用的一种方式。这种加载方式带来的一种影响就是会导致页面阻塞。因为js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以建议是把script标签写在body的后面。尽量避免这种阻塞带来的影响。 异步加载 1.defer的用法-以前适用于IE，写在可以在主流浏览器上使用。 <script src="test.js" defer></script> defer可以直接在script标签上使用。他的属性值也就他自己一个，所
超硬核五千字！彻底讲明白JavaScript中的异步和同步，以及JavaScript代码执行顺序
最新发布
Yong.Sunshine
06-17 1405
同步操作和异步操作是编程中处理任务的两种不同方式，它们主要区别在于控制流和对程序执行的影响。不知道大家是怎么理解JavaScript中的同步和异步的？JavaScript的代码执行顺序是怎么样？下面这段代码是同步还是异步的？
Javascript 异步加载详解
xialihui的博客
11-16 347
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式。 关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async 属性， defer 属性 一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式： 同步模式，又称阻塞模式，会...
script三种加载方式
Hopefully Sky的博客
05-29 5625
1、三种加载方式图解　　同步加载、延迟加载和异步加载三种加载方式图解如下： 　　从上面图中，可以看出： 　　<script>：同步模式，脚本的获取和执行是同步的。此过程中页面被阻塞，停止解析。 　　<script defer = “defer”>：延迟模式，脚本的获取是异步的，执行是同步的。脚本加载不阻塞页面的解析，脚本在获取完后并不立即执行，而是等到DOMready之后才开始执行。 　　<scri
实现动态加载JS脚本有4种方法
xinyuerr的博客
09-13 2625
这里重新温习Document.write()的用法，必须在加载页面的过程中使用，否则将复写整个页面，这里我碰到的问题是，如果用一些异步方法把内容写进页面Body中是不行的，应为IE无法被我们的脚本所阻塞，无法要求加载过程。这三种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。alert( "主页面动态加载a.js并取其中的变量：" + str );alert( "主页面动态加载a.js并取其中的变量：" + str );
JS 动态加载脚本的4种方法
10-29
内容部分介绍了四种动态加载JS的方法： 1. 直接使用document.write方法 这是一种非常直接的动态加载脚本的方法。通过document.write可以直接在文档流中写入标签来加载外部JS文件。具体做法是将标签的src属性设置为...
同步加载JS文件Demo
04-05
"同步加载JS文件Demo"就是为了解决这一问题而设计的示例。 同步加载JavaScript意味着浏览器会暂停HTML解析，直到当前的脚本加载并执行完毕才会继续。这种方式保证了依赖关系的正确性，但可能会阻塞页面的渲染，如果...
5种JavaScript脚本加载的方式
10-20
同步加载在HTML文档加载过程中按顺序执行JavaScript脚本，但是仍会阻塞后续内容的加载。异步加载则允许浏览器在加载JavaScript文件时，同时进行页面内容的加载。但需要注意的是，异步加载脚本并不保证脚本加载的顺序...
JS 动态加载js文件和css文件 同步/异步的两种简单方式
10-21
通过这些知识点，我们可以了解到动态加载资源文件的重要性及其实现方式，理解异步与同步加载的区别，以及如何解决重复加载问题，并掌握如何加载多个资源文件和对不同类型的资源进行动态加载。这些知识在提升网页性能...
javascript 文件的同步加载与异步加载实现原理
01-21
HTML 4.01 的script属性 charset: 可选。指定src引入代码的字符集，大多数浏览器忽略该值。 defer: boolean, 可选。延迟脚本执行，相当于将script标签放入页面body标签的底部，js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外，其他浏览器并未支持。 language: 已废弃。大部分浏览器会忽略该值。 src: 可选。指定引入的外部代码文件，不限制后缀名。 type: 必选。指定脚本的内容类型（MIME类型）。现实中通常不指定该值也可以，浏览器会默认当作text/javascript类型来解释执
js实现页面加载完毕之前loading提示效果
06-10
js实现页面加载完毕之前loading提示效果：在页面上所有的DOM没有加载完毕之前，我们想让页面正中间显示一个“页面加载中，请稍后...”的字样，此效果正是，样式可以根据自己的需求改动！！！
js的异步加载和同步加载
qq_62175550的博客
06-19 1382
比如，如果位置放置不当，将严重影响浏览器渲染的效率，所以我们一般把javaScript放在页面的最底部，避免浏览器在解析javaScript的时候出现资源阻塞。异步加载又叫非阻塞，浏览器在下载 JS 同时，还会继续进行后续页面的处理，比如即使因为js文件存放的位置导致的同步加载问题，也可以通过异步加载去去除影响。1.同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。在网上找了很多资料，所以我们来了解一下js中的同步加载和异步加载问题。
JavaScript script标签同步异步加载过程
weixin_44000173的博客
08-02 1923
JavaScript script标签同步异步加载过程
script标签的同步异步加载
xiaozhang_jiuke的博客
01-12 3957
script标签默认是同步加载的，也就是说，当读到script标签是引入外部js文件的，会立即停止对页面的向下解析，然后下载脚本并且执行，如果说js文件相对来说比较大，而且网速什么的又不是很好，那么用户在浏览网页的时候，会有很长一段时间的等待，用户体验很差。 当js文件里面没有对DOM进行操作或者对css进行操作的时候，我们可以将这个js文件设置成异步加载的，这样子会让用户体验更好。 那么如何设置js文件的异步加载呢？ 有两种方式： <script defer> <script
【深入理解 script 标签的 async,defer 属性(同步加载,异步加载,延迟执行)】
Hey_Coder
10-31 5689
async,defer 属性 同步加载,异步加载,延迟执行1.异步加载 和 延迟执行 存在的意义 : 避免影响 页面渲染/显示2. 同步 加载和执行 (影响 页面解析/渲染/显示)3. async 属性: 异步加载 (不是 异步执行,搭配 src 属性,仅限外部脚本)4. defer 属性: 延迟执行 (不是 延迟加载,加载是 并行的,搭配 src 属性,仅限 外部脚本 )5. 同步加载,异步加...
js文件同步和异步的引入问题
mantou_riji的博客
03-27 1437
这在服务器端环境中非常有用，因为模块文件通常都已经在本地，加载很快，而且一般需要在服务器启动时加载所有必要的模块。defer 属性：这也会使得浏览器非阻塞（异步）地下载 JavaScript 文件，但是与 async 不同的是，包含 defer 属性的。标签并不是使用模块化的导入导出方式，可以使用该标签加载执行JS文件，但是其中所有的变量和函数都会在全局作用域中。在module模块加载完成之前是不会执行下面的代码的，所以在模块导入后的所有地方都可以直接使用该模块。多个包含 async 属性的。
Javascript 同步异步加载详解 （十足的好文章！！强烈推荐）
学无止境
08-08 8804
原文链接：http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/    本文总结一下浏览器在 javascript 的加载方式。 关键词：异步加载（async loading），延迟加载（lazy loading），延迟执行（lazy execution），async 属性， defer 属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值