HTML5异步加载二个方案

HTML5异步加载二个方案

       什么是异步加载就是在执行过程同时加载,通常会使图片之类或内容加载比较慢,可以先忽略掉。比如网页游戏经常会在玩的过程中,玩家都是黑影(未加载图形,由其他黑影模型代替),如果另一个线程完成加载了,在贴上去,就是异步的。

白话:就是金庸小说《射雕英雄传》周伯通的「双手互搏」。双手可以分开做两件事。

 

这文章只介绍html5

第一, async:

async的定义和用法(是HTML5的属性)

async 属性规定一旦脚本可用,则会异步执行。

示例:

代码如下:

<script type="text/javascript" src="demo_async.js" async="async"></script>

async:

async的定义和用法(是HTML5的属性)

async 属性规定一旦脚本可用,则会异步执行。

示例:

代码如下:

<script type="text/javascript"   src="demo_async.js" async="async"></script>

 

注释:

1.async 属性仅适用于外部脚本(只有在使用 src 属性时)。

2.有多种执行外部脚本的方法:

•如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)

•如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行

•如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

 

第二,创建script,插入到DOM,加载完毕后callBack

代码如下:

  1.   <body>
  2.        这是测试加载完页面后,然后加载js文件
  3.   </body>
  4.   <script>
  5.    
  6.       function loadScript(url, callback){
  7.           var script =   document.createElement("script")
  8.           script.type =   "text/javascript";
  9.               script.onload = function(){
  10.                   callback();
  11.           }
  12.           script.src = url;
  13.           document.body.appendChild(script);
  14.       }
  15.    
  16.       loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js");
  17.   </script>
posted @ 2014-08-04 09:24  ylong52  阅读(1977)  评论(0编辑  收藏  举报