`

加载JS时的各个状态

阅读更多
我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js.onreadystatechange 来跟踪每个状态变化的情况(一般为 loading 、loaded、interactive、complete),当返回状态为 loaded 或 complete 时,则表示加载完成,返回回调函数。

对于 readyState 状态需要一个补充说明:

1、在 interactive 状态下,用户可以参与互动。

2、Opera 其实也支持 js.onreadystatechange,但他的状态和 IE 的有很大差别。

具体实现代码如下:

function include_js(file) {

      var _doc = document.getElementsByTagName('head')[0];

      var js = document.createElement('script');

      js.setAttribute('type', 'text/javascript');

      js.setAttribute('src', file);

      _doc.appendChild(js);


      if (document.all) { //如果是IE

            js.onreadystatechange = function () {

                    if (js.readyState == 'loaded' || js.readyState == 'complete') {

                      alert('IE6、IE7 support js.onreadystatechange');

                  }

           }

      }

      else {

             js.onload = function () {

                       alert('Firefox、chrome and others support js.onload');

              }

       }

}

include_js('jquery.js');

这里有一个问题就是假如

不过这不是最完美的方式,我觉得比较好的办法是用ajax来动态加载js,这样的话,src的路径不正确(即js文件不存在)的话,就能检查出来。而且还能控制加载顺序(同步加载)。可惜的是该方法也不是完美的:

(1)由于ajax请求无法跨域,因此加载的脚本必须与页面同域

(2)不适用于加载多个有依赖关系的脚本,因为该方法无法保证脚本加载的顺序。


        js的src不存在的话,那么由于IE中仍然会出现”complete”的状态,所以很可能会出现错误的情况(比如这里就出现了错误的提示:“alert('IE6、IE7 support js.onreadystatechange');”),不过实际的情况会是这样的,判断状态后执行的函数会是动态加载进来的js里面的函数,所以可以用一个try…catch语句来避免出现这种错误。
分享到:
评论

相关推荐

    angular按需加载js

    4. 配置Angular UI Router,定义各个状态,每个状态可包含对应的控制器、模板和其他依赖。 5. 使用Angular Async Loader,根据路由变化动态加载所需的模块。这通常在`$stateChangeStart`事件中处理。 6. 编写各个...

    js加载页面等待效果

    4. **JavaScript操作DOM**:通过JS可以动态修改DOM元素的属性,如显示/隐藏状态,使得在页面加载的不同阶段控制等待效果的可见性。 5. **异步加载**:对于大型应用,可以采用分块加载或者按需加载策略,通过...

    一个相对完善的js loading等待效果例子

    在JavaScript开发中,"加载等待效果"是一种常见的用户体验优化手段,它通常用于在处理大量数据或执行异步操作时向用户展示进度,以减少用户的等待焦虑。本案例中,我们探讨的是一个相对完善的JS实现的加载等待效果。...

    通过JavaScript+IFRAME实现页面分屏加载

    - **控制加载顺序**:根据需要,可以通过JavaScript控制各个IFRAME的加载顺序,实现逐屏加载。 ### 4. 示例代码 以下是一个简单的示例,展示了如何使用JavaScript和IFRAME实现分屏加载: ```javascript // 创建...

    页面正在加载组件-2.0

    这个过程优化了用户体验,因为不是一次性加载整个页面,而是按需加载各个功能模块,尤其是当页面内容庞大或者包含多个交互功能时。 1. **组件化开发**: - 组件化是现代前端开发的核心技术之一,它允许开发者将...

    css_Loading加载动画

    在网页设计中,用户体验是至关重要的,而当用户在等待页面完全加载时,一个吸引人的、优雅的“Loading”加载动画可以显著提升用户体验。"css_Loading加载动画"这个主题,聚焦于利用CSS和JavaScript技术来创建这些...

    js实现图片在未加载完成前显示加载中字样

    通过使用JavaScript,代码实现了动态检测图片加载状态并在状态改变时执行回调函数的功能。JavaScript的动态特性让页面元素(如图片)的状态可以根据用户交互或程序逻辑发生变化。在本例中,图片的加载状态变化触发了...

    2款页面预加载动画效果,加载页面时出现圆形进度条,加载后LOGO缩小。兼容主流浏览器

    JavaScript可以实时控制动画的执行,例如根据页面加载进度动态更新进度条的状态。如果使用前端框架,它们通常提供了一套更高级的抽象,使得创建和管理动画变得更加容易。 预加载动画的优化也非常重要。过大或过于...

    13个超酷的页面加载特效

    5. **页面加载状态**:理解页面加载的生命周期对于实现加载特效至关重要。这些特效可能在页面开始加载时启动,在特定资源加载完成后结束,或者在整个加载过程中持续显示。 6. **预加载动画**:一种常见的加载特效是...

    JS 飞机大战 (含源码).pdf

    * 加载状态:游戏加载时的状态。 * 运行状态:游戏运行时的状态。 * 暂停状态:游戏暂停时的状态。 * 结束状态:游戏结束时的状态。 事件处理 游戏中定义了多个事件处理函数,例如: * 鼠标点击事件:处理游戏...

    【JavaScript源代码】react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析.docx

    在React中实现图片加载的三个...总的来说,通过React的组件化思想和事件监听,我们可以轻松地实现图片加载的各个阶段,并提供定制化的加载体验。同时,利用`useState`和默认props,可以确保组件的灵活性和可配置性。

    vue loading 页面加载动画提示

    在Vue.js中,我们可以创建一个全局组件来处理加载状态。组件可以包含加载动画的HTML结构以及与之相关的逻辑。例如,你可以定义一个名为`Loading`的组件: ```javascript // loading.js import Vue from 'vue' ...

    css3漏斗型Loading加载动画.zip

    7. **JavaScript**:尽管项目标签提到的是“JS特效”,但在这个案例中,JavaScript可能被用来控制动画的启动、暂停、停止,或者根据实际加载进度更新动画状态。 在压缩包中的“jiaoben181215”文件可能是代码示例的...

    页面加载效果

    页面加载效果是网页设计中一个重要的用户体验组成部分,它在用户打开网页时呈现过渡动画,以掩盖内容实际加载的时间,给予用户一种更为流畅的浏览体验。"fakeloader"是一种常见的页面加载效果实现方式,它通常由...

    全国所有省份与城市javascript,js脚本

    4. 动态加载:为了提高性能,可能会使用懒加载策略,只在用户需要时加载对应省份的城市数据。 5. 渲染:使用JavaScript操作DOM,动态创建和更新省份与城市的选项。这可能涉及到`innerHTML`属性的修改,或者使用更...

    纯CSS3六边形加载动画特效.zip

    在实际开发中,这样的加载动画不仅适用于网页加载,还可以应用于按钮激活状态、数据加载过程或者作为通用的指示器,为用户界面增添活力和专业感。了解并掌握如何创建这种纯CSS3的六边形加载动画,不仅可以提升前端...

    GridLoadingAnimations网格项目加载动画

    "Grid Loading Animations"是一个专门用于创建这种效果的JavaScript项目,旨在为网格布局中的元素提供吸引人的加载体验。这个项目适用于那些希望在网站或应用程序中添加动态效果的开发者。 JavaScript作为客户端...

    可爱有趣的js+css3网页加载中交互动画

    "可爱有趣的js+css3网页加载中交互动画"就是一个这样的实例,它结合了JavaScript(js)和层叠样式表第三版(css3)技术,创造出一种独特的视觉体验。 首先,让我们来了解一下JavaScript(js)在这个过程中的作用。...

    ECharts全国及各个省地图js、json文件

    在这个压缩包中,包含的是ECharts用于绘制中国全国及各个省份地图的专用资源,主要以js(JavaScript)和json(JavaScript Object Notation)文件格式存在。这些文件是ECharts地图组件的重要组成部分,帮助开发者能够...

    css3超炫loading加载特效.zip

    尽管这个资源的标签是“JS特效-其它代码”,但有时JavaScript可能会与CSS3结合使用,以实现更复杂或动态的加载效果。例如,JavaScript可以用来启动或停止动画,或者根据数据加载的进度更新加载条。 通过学习和运用...

Global site tag (gtag.js) - Google Analytics