js异步加载Javascript代码示例详解

当我们在Javascript里需要用到jQuery但又无法判断是否加载过时,可以通过下面的方法来自动判断并加载jQuery,代码如下:

 代码如下 复制代码

function getScript(url, success) {
    var script = document.createElement('script');
    script.src = url;
    var head = document.getElementsByTagName('head')[0],
    done = false;
   
    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function() {
        if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
            done = true;
           
            // callback function provided as param
            success();
           
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
        };
    };
    head.appendChild(script);
};

if (typeof jQuery == 'undefined') {
    alert('Not found jQuery');
    getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
        alert('jQuery loaded');
    });
}

loadScript异步加载脚本

一、语法:
loadScript(url[,callback])
或者
loadScript(settings)
二、settings支持的参数:
url:脚本路径
async:是否异步,默认false(HTML5)
charset:文件编码
cache:是否缓存,默认为true
success:加载成功后执行的函数,优先执行callback。
三、调用举例:

 代码如下 复制代码

//loadScript(url[,callback])
loadScript(“http://code.jquery.com/jquery.js”);
loadScript(“http://code.jquery.com/jquery.js”,function(){
console.log(1)
});
//loadScript(settings)
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8〃,”cache”:false});
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8〃,”success”:function(){
console.log(2)
}});
//或者你可以酱紫:
//loadScript(settings[,callback])
loadScript({“url”:”http://code.jquery.com/jquery.js”,”async”:false,”charset”:”utf-8〃},function(){
console.log($)
});

四、源代码:

 

 代码如下 复制代码

function loadScript(url,callback) {
var head = document.head || document.getElementsByTagName(“head”)[0] || document.documentElement,
script,
options,

if (typeof url === “object”) {
options = url;
url = undefined;
}
s = options || {};
url = url || s.url;
callback = callback || s.success;
script = document.createElement(“script”);
script.async = s.async || false;
script.type = “text/javascript”;
if (s.charset) {
script.charset = s.charset;
}
if(s.cache === false){
url = url+( /?/.test( url ) ? “&” : “?” )+ “_=” +(new Date()).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
if(callback){
document.addEventListener ? script.addEventListener(“load”, callback, false) : script.onreadystatechange = function() {
if (/loaded|complete/.test(script.readyState)) {
script.onreadystatechange = null
callback()
}
}
}
}

时间: 2016-08-21
Tags: 代码, this, Cache

js异步加载Javascript代码示例详解的相关文章

Android AsyncTask 后监听异步加载完毕的动作详解_Android

Android 使用AsyncTask 后监听异步加载完毕的动作   AsyncTask 的使用方法网上有很多例子,使用起来也非常的方便.这里就不详细说具体的使用方法了,同学可以Google 一下,很多. 场景模拟       当我们在加载一个列表的时候,比如GridView ,这时候我们考虑到不阻塞UI的做法,一般会使用线程Thread .Timer 或者使用AsyncTask ,而这些操作都是在在后台另外开一个线程给我们找数据,具体得到的数据需要使用Handler 去更新UI,AsyncTa

Android布局加载之LayoutInflater示例详解

前言 Activity 在界面创建时需要将 XML 布局文件中的内容加载进来,正如我们在 ListView 或者 RecyclerView 中需要将 Item 的布局加载进来一样,都是使用 LayoutInflater 来进行操作的. LayoutInflater 实例的获取有多种方式,但最终是通过(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)来得到的,也就是说加载布局的 LayoutInflat

RequireJS框架帮助用户异步按需加载JavaScript代码

本文介绍的是另一款较为精简的 RequireJS 框架,既想使用 AMD 的特性又不想引入一个庞大的库的开发人员,不妨试试 RequireJS.RequireJS 可以帮助用户异步按需的加载 JavaScript 代码,并解决 JavaScript 模块间的依赖关系,提升了前端代码的整体质量和性能. 前端开发在近一两年发展的非常快,JavaScript 作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一些前端开发中的共性问题,但是实现又不尽相同.在这个背景下,

点评js异步加载的4种方式_javascript技巧

js异步加载的4种方式,点评开始. 方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"&g

浅析JS异步加载进度条_javascript技巧

展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1.当用户点击load button执行异步请求. 调用方法 出现加载条 2.怎么实现进度条呢? 1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值 2) 在document.body 新增一个动态的div. 代码实现: Main.html: <!DOCTYPE html> <html>

JavaScript作用域示例详解_javascript技巧

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域示例详解的介绍,希望能帮助大家更好的学习JavaScript. 任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 一.JavaScript中无块级作用域 在Java或C#中存在块级作用域

yepnope.js 异步加载资源文件_javascript技巧

典型代码示例 复制代码 代码如下: yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 当Modernizr.geolocation为真时,加载yep项也就是"normal.js",否则加载nope项--可以同时加载多个文件. yepnope和现有的xxx script loader有什么区别? 个人认为主要 是这两点: 可以同时处理jav

百度统计推出异步加载统计代码 助力网站分析更高效

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客 站长团购 云主机 技术大厅 尊敬的百度联盟会员,您好: 百度统计推出异步统计代码已有段时间,对于已使用或准备使用百度统计的用户来说,怎样更新和部署百度统计异步代码?异步代码有什么好处?需要注意什么?都是迫切需要知道的问题,下面就为您简单介绍一下百统计异步代码的优势及如何部署. 异步统计代码有什么不同? 百度统计异步代码是以异步加载形式(对网页加载速度零影响)加载

延时加载JavaScript代码提高速度_javascript技巧

延时加载js代码提高速度,具体内容如下所示: 如果网页中存在大量的javascript代码会极大的影响网页的访问速度,下面就简单介绍一下如何处理此问题. 一.延时加载js文件: 可以使用定时器函数setTimeout()让外部的js文件延迟加载,例如: <script type="text/javascript" src="" id="my"></script> <script type="text/jav