说到有序加载，我们先来说说js的无序加载：

<script src="jquery/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

     window.onload = function () {

          $("#head").append("<script src='js/hello.js' type='text/javascript'><\/script>")

          $("#head").append("<script src='js/world.js' type='text/javascript'><\/script>");

     }

</script>

为什么一定要有顺序要求这个概念呢？对于上面的那个动态追加的“两个js”文件，在IE系列中，你不能保证hello.js一定会在world.js前执行，

他只会按照服务器端返回的顺序执行代码。

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

 2

 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 4 <html xmlns="http://www.w3.org/1999/xhtml">

 5 <head id="head">

 6     <title></title>

 7     <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

 8 </head>

 9 <body>

10     <img src="1.jpg" width="200" height="300" />

11     <script type="text/javascript">

12         function loadScript(url, callback) {

13             var script = document.createElement("script");

14             script.type = "text/javascript";

15

16             //IE17             if (script.readyState) {

18                 script.onreadystatechange = function () {

19                     if (script.readyState == "loaded" || script.readyState == "complete") {

20                         script.onreadystatechange = null;

21                         callback();

22                     }

23                 }

24             } else {

25                 //非IE26                 script.onload = function () {

27                     callback();

28                 }

29             }

30             script.src = url;

31             document.getElementById("head").appendChild(script);

32         }

33         //第一步加载jquery类库34         loadScript("jquery/jquery-1.4.1.js", function () {

35             //第二步加载hello.js36             loadScript("js/hello.js", function () {

37                 //第三步加载world.js38                 loadScript("js/world.js", function () {

39

40                 });

41             });

42         });

43     </script>

44 </body>

45 </html>

大家也能看到，页面完全Load的时间其实也就310ms左右，大大提高了网页的下载呈现和友好型。

js优化 ----js的有序加载的更多相关文章

  1. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  2. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  3. js和jquery页面初始化加载函数的方法及先后顺序

    运行下面代码.弹出A.B.C.D.E的顺序:A=B=C>D=E. jquery:等待页面加载完数据,以及页面部分元素(不包括图片.视频), js:是页面全部加载完成才执行初始化加载. <! ...

  4. 常用js，css文件统一加载方法，并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

  5. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  6. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  7. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. 用JS实现判断iframe是否加载完成

    本文出至:新太潮流网络博客 var iframe = document.createElement("iframe"); iframe.src = "blog.iinu. ...

随机推荐

  1. 《赢在用户：Web人物角色创建和应用实践指南》阅读总结

           本书针对创建人物角色的每一个步骤,包括进行定性.定量的用户研究,生成人物角色分类,使人物角色真实可信等进行了十分详细的介绍.而且,在人物角色如何指导总体商业策略.确定信息架构.内容和设计 ...

  2. android142 360 分页加载

    dao: package com.itheima.mobileguard.db.dao; import java.util.ArrayList; import java.util.List; impo ...

  3. 真机下, 如何在File Explorer里看data下的数据?

    首先手机得Root , 你如果想单个单个的看, root explorer可以设置Permission Other下的两个权限点上就ok了. 如果想看到所有的, 即子目录也可以看到, 只需要adb r ...

  4. JavaScript之对数组中元素进行增删改

    JavaScript中数据类型无非是:简单类型+复杂类型,什么是简单什么又是复杂.从电脑物理存储上讲,简单就是所见即所得,你看见什么,电脑里面存的就只是什么,并不会因为一些关系(比如引用)而多出一部分 ...

  5. DataTable 的数据导出到 Excel

    如果有个DataTable类型的数据,可以这样导出到Excel中: public static void ExportToExcel(DataTable dt, string fileName) { ...

  6. Objective-C ,ios,iphone开发基础:NSDictionary(字典) 和 NSMutableDictionary

    NSDictionary(字典),NSDictionary类似于 .net中的parameter,l类似于java中的map. 通过唯一的key找到对应的值,一个key只能对应一个只,而多个key可以 ...

  7. ES各种错误解决

    _update API 执行报错 错误信息: { "error": { "root_cause": [ { "type": "re ...

  8. HDU 4433 locker

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4433 这是一道2012年ACM天津赛区现场赛的题目,大意是给出两串数字,求用最少的转换次数将一串(A) ...

  9. poj 2492 并查集

    思路:当a,b的根节点find(a)与find(b)不同时,就直接将这两个数连接起来.由于每个树的根节点的kind值一定为0,所以,对于a,b的kind值相同,我们就讲其中一个根的kind值变为1,当 ...

  10. HTTP - 摘要认证

    基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与 SSL 配合使用. 摘要认证是另一种 HTTP 认证协议,它与 ...