动态同步加载JS脚本

js实现页面加载完毕之前loading提示效果 js实现页面加载完毕之前loading提示效果:在页面上所有的DOM没有加载完毕之前,我们想让页面正中间显示一个“页面加载中,请稍后...”的字样,此效果正是,样式可以根据自己的需求改动!!! 立即下载
脚本:
  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.         },

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

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

  29.         //同步加载
  30.         addJs: function (rootObject, url) {
  31.             var oXmlHttp = this.getXmlHttpRequest();

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

  45.             //1.True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
  46.             //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
  47.             oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"></script>',ff不会  
  48.             oXmlHttp.send(null);
  49.             this.includeJsText(rootObject, oXmlHttp.responseText);
  50.         }
  51.     }
  52. })();
  53. </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>
同步异步动态引入js文件的几种方法总结 下面小编就为大家带来一篇同步异步动态引入js文件的几种方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 立即下载

相关推荐

javascript 文件的同步加载与异步加载实现原理

HTML 4.01 的script属性 charset: 可选。指定src引入代码的字符集,大多数浏览器忽略该值。 defer: boolean, 可选。延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外,其他浏览器并未支持。 language: 已废弃。大部分浏览器会忽略该值。 src: 可选。指定引入的外部代码文件,不限制后缀名。 type: 必选。指定脚本的内容类型(MIME类型)。现实中通常不指定该值也可以,浏览器会默认当作text/javascript类型来解释执

JS同步加载以及异步加载的三种方式

JS同步加载 同步加载就是一种我们最常用的一种方式。这种加载方式带来的一种影响就是会导致页面阻塞。因为js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以建议是把script标签写在body的后面。尽量避免这种阻塞带来的影响。 异步加载 1.defer的用法-以前适用于IE,写在可以在主流浏览器上使用。 <script src="test.js" defer></script> defer可以直接在script标签上使用。他的属性值也就他自己一个,所

m0_47191887的博客 2773

拯救者R7000P(2021)装双系统Ubuntu20.04 解决联发科MT7921无线网卡在Ubuntu中不能联网

拯救者R7000P(2021)装双系统Ubuntu20.04/Ubuntu18.04 电脑配置:联想拯救者R7000P CPU:AMD R7-5800H GPU:RTX3060-6G 内存:16GB 固态:500G(原装)+500(加装) 1.做系统盘(本文以Ubuntu20.04为例) 1.下载Ubuntu20.04镜像 直接去Ubuntu官网或者一些国内的镜像去下载都可以,这里给出一个网址https://ubuntu.com/download/desktop,根据需要下载自己学要的Ubuntu版本,后缀

qq_41108639的博客 1万+

JavaScript script标签同步异步加载过程

JavaScript script标签同步异步加载过程

weixin_44000173的博客 2213

四足机器人关节电机FOC控制实战:从磁编码器校准到SVPWM调试避坑指南

本文详细解析了四足机器人关节电机FOC控制实战,涵盖磁编码器校准、电流环调试和SVPWM波形优化等关键环节。通过MIT Cheetah案例展示如何解决21倍电气误差问题,并提供相序自动校正、PI参数整定等实用代码片段,帮助工程师避开永磁同步电机(PMSM)控制中的常见陷阱。

weixin_29281915的博客 489

双三相电机控制避坑指南:为什么你的SVPWM谐波大?四矢量调制实战解析

本文深入解析双三相电机控制中SVPWM谐波大的问题,并提供四矢量调制实战方案。通过分析谐波来源、四矢量调制原理及工程实现步骤,显著降低电流THD至3-5%,提升系统效率2.3个百分点。特别适合需要优化电机控制的工程师参考。

weixin_30645617的博客 397

写一个爬取股票人气排名的Python程序!

Pandas的query函数为我们提供了一种编写查询过滤条件更简单的方法,特别是在的查询条件很多的时候,在本文中整理了10个示例,掌握着10个实例你就可以轻松的使用query函数来解决任何查询的问题。

2401_86168842的博客 2942

18、改进的LSTM用于污染物浓度预测

本文探讨了改进的长短期记忆网络(MLSTM)在空气污染预测中的应用,重点分析了其对印度泰米尔纳德邦五个城市(金奈、塞勒姆、哥印拜陀、马杜赖和图蒂科林)的PM2.5、PM10、SO2和NO2四种污染物浓度的预测效果。通过与传统LSTM模型的对比实验,结果显示MLSTM在预测准确性和执行效率方面均优于LSTM。研究结果表明,MLSTM在空气质量预测领域具有较高的应用潜力,可为环境保护和空气质量管理提供有力支持。

j0k1l2m3n的博客 175

js文件同步和异步的引入问题

这在服务器端环境中非常有用,因为模块文件通常都已经在本地,加载很快,而且一般需要在服务器启动时加载所有必要的模块。defer 属性:这也会使得浏览器非阻塞(异步)地下载 JavaScript 文件,但是与 async 不同的是,包含 defer 属性的。标签并不是使用模块化的导入导出方式,可以使用该标签加载执行JS文件,但是其中所有的变量和函数都会在全局作用域中。在module模块加载完成之前是不会执行下面的代码的,所以在模块导入后的所有地方都可以直接使用该模块。多个包含 async 属性的。

mantou_riji的博客 2280

基于分数阶的图像边缘细节检测——边缘计算

在图像处理中,我们可以使用分数阶导数运算器来计算图像的分数阶梯度,从而得到更精确的边缘信息。通过使用基于分数阶的图像边缘细节检测方法,我们可以更准确地捕捉图像中的边缘细节信息。在这篇文章中,我们将介绍一种基于分数阶的方法来进行图像边缘细节检测,并提供相应的源代码实现。需要注意的是,以上提供的代码示例仅用于演示基于分数阶的图像边缘细节检测方法的实现。然后,我们读取了待处理的图像,并进行了预处理,如高斯模糊,以减少噪声的影响。最后,我们通过设置一个阈值,将梯度图像转化为二值化的边缘图像,并将结果显示出来。

GudcSql的博客 403

华为od 面试八股文_Python_05_含答案

华为od 面试八股文_Python_05_含答案

MISAYAONE的博客 2564

javascript中动态加载js文件多种解决办法

var head = document.head                 || document.getElementsByTagName("head")[0]|| document.documentElement;      var script = document.createElement("script");      script.setAttribute("type",

yinxianluo的专栏 1万+

ADS基础教程24 - Gerber文件的导入

一、引言二、基本概念1.仿真文件下载2.仿真文件介绍二、导入步骤1.新建workspace2.选择Layout结构3.导入设计4.选择文件类型5.导入文件6.预览文件内容7.铜皮离散问题四、总结选择。通过本文章结束,可以了解ADS中如何将导入Gerber文件,并且对导入的铜皮进行合并。下一步就针对导入的文件进行层叠设置和编辑。END!}}END!

XZ_ZC的博客 3054

ie从服务器加载同名js文件,同步异步动态引入js文件的几种方法总结

同步异步动态引入js文件的几种方法总结发布于 2017-05-19 05:58:43 | 71 次阅读 | 评论: 0 | 来源: 网友投递JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果...

weixin_31328561的博客 620

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

如何动态加载js

如果使用ajax开发页面,可能会遇到需要加载很多js文件的情况。每个js文件需要耗费一些重新连接的时间,所以会导致页面显示过慢的情况。如果采用动态加载js的方式,先把几个重要的js下到客户端,然后跟据需要再加在相关的js可以提高页面显示的速度和效率。 下面介绍几种动态加载的方法: 1、直接document.write document.write(""); ...

u011124352的博客 106

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

【转载】动态加载JS脚本的4种方法

要实现动态加载JS脚本有4种方法: 1、直接document.write language="javascript">      document.write("src='test.js'>");    2、动态改变已有script的src属性 src='' id="s1">  language="javascript">      s1.src="test.js" 

绝凌峰 390

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

异步加载JS脚本

参考:https://www.jianshu.com/p/bf8b5bf5fc90 javaScript脚本对现代网站来说是必不可少的。当用户访问站点,需要下载各种资源,例如js脚本,CSS,图片,iframe等。 浏览器下载除js外的资源时,会 并行下载,以提高性能。但下载js脚本时,会禁止并行下载(成为脚本阻塞)。浏览器遇到JS时,必须等JS下载,解析,执行完毕后,才能继续并行下...

Sugarman0620的博客 218

实现动态加载JS脚本有4种方法

这里重新温习Document.write()的用法,必须在加载页面的过程中使用,否则将复写整个页面,这里我碰到的问题是,如果用一些异步方法把内容写进页面Body中是不行的,应为IE无法被我们的脚本所阻塞,无法要求加载过程。这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。alert( "主页面动态加载a.js并取其中的变量:" + str );alert( "主页面动态加载a.js并取其中的变量:" + str );

xinyuerr的博客 2845

动态加载js文件

window.onload=function(){ //如果需要加载js文件须在这里面调用文件里的方法,可解决同步问题 text();//调用引入的js文件里方法 } //动态加载js文件 var flag=true;//如果为true可选择加载js脚本 if(flag){ var script =ducument.createElement("script"); script.type="te

longchenghui20的专栏 348

JS动态加载JS

1、直接document.write     document.write(""); 2、动态改变已有script的src属性     s1.src="test.js" 3、动态创建script元素     var oHead = document.getElementsByTagName('HEAD').item(0);     var oS

it_man的专栏 1865

动态加载JS脚本的4种方法

要实现动态加载JS脚本有4种方法: 1、直接document.write document.write(""); 2、动态改变已有script的src属性 s1.src="test.js" 3、动态创建script元素 var oHead = docum...

gukeming888的博客 144

ajax动态加载JS脚本的四种方法

Prototype之Ajax.Updater不能正确引入脚本的问题 实用且不花哨的js代码大全 要实现动态加载JS脚本有4种方法: 1、直接document.write document.write(""); 2、动态改变已有script的src属性 s1.src="test.js" 3、动...

xuyelong3的博客 1465

js 加载问题

JS动态加载JS<br />1、直接document.write <br /> <script language="javascript"> <br />     document.write("<script src='test.js'><//script>"); <br /> </script> <br /> 2、动态改变已有script的src属性 <br /> <script src='' id="s1"></script> <br /> <script language="javasc

lyq123333321的专栏 699
上一篇: 【转载】JS操作DIV全属性
下一篇: asp.net中Repeater分页代码…
绝凌峰
博客等级 码龄18年 28粉丝 183原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值