说到有序加载，我们先来说说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. adobe air 通用设置

    某些应用程序描述符设置对所有移动设备应用程序都很重要. 所需的 AIR 运行时版本 使用应用程序描述符文件的命名空间指定应用程序所需的 AIR 运行时版本. 在 application 元素中分配的命 ...

  2. PAT 1021

    1021. Deepest Root (25) A graph which is connected and acyclic can be considered a tree. The height ...

  3. c盘太小

    C:\Users\Administrator\AppData\Roaming\Apple Computer

  4. iOS10全新推送功能的实现

    从iOS8.0开始推送功能的实现在不断改变,功能也在不断增加,iOS10又出来了一个推送插件的开发(见最后图),废话不多说直接上代码: 在开始之前需要打开一个推送开关,不然无法获取deviceToke ...

  5. Asp.Net 之 调用分享接口

    一.后台分享方式 腾讯QQ.腾讯空间.腾讯微博.新浪微博分享接口,如下: 注意:在网站对接前,请先申请注册好您的QQ登录appid.新浪登录Appkey.腾讯微博appkey. //腾讯QQ分享 ht ...

  6. Node.js module.exports和exports的区别

    require 用来加载代码,而 exports 和 module.exports 则用来导出代码,从接触node.js就不会它们两陌生,上代码: foo.js exports.a = functio ...

  7. CAML query for Group by count and data

    CAML query for Group by count and data Company Category Product Name Microsoft Developer Visual Stud ...

  8. ArcGIS Server 10.2 实战（四）格栅动态配色服务

    当你的地理处理服务输出的是格栅,那个不可避免地需要为格栅的各类型数据添加不同色彩进行区分,而默认时格栅的色彩是随机的,或者固定死一套着色方案是也显得不够人性化,难以满足多样的客户需求,下面谈谈如何解决 ...

  9. Oracle 版本查看及版本号说明

    http://blog.163.com/magicc_love/blog/static/185853662201210194592757/ select * from v$version; 或sele ...

  10. H.264编码之IDCT变换原理

    上次讲到了DCT变换的推导过程,这次主要给大家讲下IDCT反变换的推导过程.建议大家先看上次讲的DCT变换公式推导过程.这样在看这篇文章时会容易很多!话不多说,让我们开始IDCT的旅程吧! IDCT反 ...