说到有序加载，我们先来说说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. phpstorm 和web storm汉化

    http://www.jincaimao.com/cms-phpstorm-index.html phpStorm汉化方法: B1).找到X:\Program Files\JetBrains\PhpS ...

  2. 在Linux使用mingw32来编写win32程序

    MinGW - Minimalist GNU For Windows Mingw32 是 GNU 計畫工具的集合,包含了大量的標頭檔(header files).函式庫與指 令程式.目的在提供免費的工 ...

  3. win7家庭版任务栏预览消失，只显文字终极解决法

    出现问题:win7家庭基础版,任务栏的预览窗口没有了,只有文字: Likethis:   工具/原料 services.msc 方法/步骤   网上的解决办法都试了,不管用,先把网上的方法列举出来如下 ...

  4. Step-by-Step XML Free Spring MVC 3 Configuration--reference

    The release of Spring 2.5 reduce the burden of XML by introduction annotation based configuration, b ...

  5. super 和this的用法

    class Person { public static void prt(String s) { System.out.println(s); // 打印出来结果 } Person() { prt( ...

  6. android 编写动画

    1.在编写动画的时候需要新建一个xml 新建的步骤是选中res单击右键选择Android resource file 然后弹出一个框 ,然后再Resource Type 里面选择Animation 然 ...

  7. iOS之duplicate symbols for architecture x86_64错误

    在我们写代码过程中可能会经常遇到这样一个错误: <span style="font-size:32px;color:#ff0000;">ld: 4 duplicate  ...

  8. linux配置LAMP

    VPS注意:最近在VPS安装过程中,MYSQL老是报错 dpkg: error processing package mysql-server-5.6 (--configure): subproces ...

  9. asp.net 文件压缩zip下载

     今天分享下昨天做的一个东西 asp.net 的文件  zip 批量下载,首先你需要去 到http://dotnetzip.codeplex.com这个站点下载zip 的包,在里面找到 Ionic.Z ...

  10. CSS理解之padding--非原创

    因为在慕课网观看了张大神的视频,学习到了一点东西,向和大家分享.视频地址 代码如下: <!DOCTYPE html> <html lang="zh-CN"> ...