说到有序加载，我们先来说说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. flash 入门课知识小结

    一. 几种类型帧的小结:(关键帧.空白关键帧.普通帧)1. 特点  帧——是进行flash动画制作的最基本的单位,每一个精彩的flash动画都是由很多个精心雕琢的帧构成的,在时间轴上的每一帧都可以包含 ...

  2. Linux shell 脚本攻略之根据扩展名切分文件名

    摘自:<Linux shell 脚本攻略>Page61-62  

  3. JavaScript 之 页面跳转及Frame动态加载

    一.页面跳转 JS跳转大概有以下五种方式: 1.跳转到B页面 <script language="javascript" type="text/javascript ...

  4. JS获取事件源对象

    发现问题: 在复杂事件处理过程中,很可能会丢失event事件对象,特别是IE和FireFox两大浏览器,这个时候要捕获事件源就非常困难…… 如果在事件处理过程中,需要不断地传递event事件对象作为参 ...

  5. Debian 7 安装 Emacs 24.4

    一. 安装依赖包 sudo apt-get build-dep emacs23 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 下列软件包将被[卸载]: li ...

  6. C#使用HttpHelper万能框架，重启路由器

    首先声明,不是所有路由器都可以通过下面的代码来让路由器执行重启. 下面的代码测试的路由器是(TP-LINK TD-W89841N增强型).要根据自己的路由器来写代码. using CsharpHttp ...

  7. jQuery选择器容易忽视的小知识大问题

    1 关于检查某个元素在网页上的存在 很多人会惯性的写成  } 其实应该根据获取到元素的长度来判断 if($("#tt").length>0){ //do something博 ...

  8. Lombok(1.14.8) - @Synchronized

    @Synchronized @Synchronized,实现同步. package com.huey.lombok; import java.util.Date; import lombok.Sync ...

  9. 对XML的操作

    对XML的操作主要使用到的语法示例: using System.Xml; private static string XmlMarketingStaff = AppDomain.CurrentDoma ...

  10. HDOJ2021发工资咯：）

    发工资咯:) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...