loader.js

/**
* @preserve Tiny-Loader: A small loader that load CSS/JS in best way for page performanceIs.
*
* @version 1.0.1
* @copyright The Youzan Limited [All Rights Reserved]
* @license MIT License (see LICENSE.txt)
*/
(function(window, document) {
'use strict';
// cssExpr 用于判断资源是否是css
var cssExpr = new RegExp('\\.css');
var nHead = document.head || document.getElementsByTagName('head')[0];
// `onload` 在WebKit < 535.23， Firefox < 9.0 不被支持
var isOldWebKit = +navigator.userAgent
.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i, '$1') < 536;

// 判断对应的node节点是否已经载入完成
function isReady(node) {
return node.readyState === 'complete' || node.readyState === 'loaded';
}

// loadCss 用于载入css资源
function loadCss(url, setting, callback) {
var node = document.createElement('link');

node.rel = 'stylesheet';
addOnload(node, callback, 'css');
node.async = true;
node.href = url;

nHead.appendChild(node);
}

// loadJs 用于载入js资源
function loadJs(url, setting, callback) {
var node = document.createElement('script');

node.charset = 'utf-8';
addOnload(node, callback, 'js');
node.async = !setting.sync;
node.src = url;

nHead.appendChild(node);
}

// 在老的webkit中，因不支持load事件，这里用轮询sheet来保证
function pollCss(node, callback) {
var isLoaded;

if (node.sheet) {
isLoaded = true;
}

setTimeout(function() {
if (isLoaded) {
// 在这里callback 是为了让样式有足够的时间渲染
callback();
} else {
pollCss(node, callback);
}
}, 20);
}

// 用于给指定的节点绑定onload回调
// 监听元素载入完成事件
function addOnload(node, callback, type) {
var supportOnload = 'onload' in node;
var isCSS = type === 'css';

// 对老的webkit和老的firefox的兼容
if (isCSS && (isOldWebKit || !supportOnload)) {
setTimeout(function() {
pollCss(node, callback);
}, 1);
return;
}

if (supportOnload) {
node.onload = onload;
node.onerror = function() {
node.onerror = null;
window._cdnFallback(node);
};
} else {
node.onreadystatechange = function() {
if (isReady(node)) {
onload();
}
};
}

function onload() {

// 执行一次后清除，防止重复执行
node.onload = node.onreadystatechange = null;

node = null;

callback();
}
}

// 资源下载入口，根绝文件类型的不同，调用loadCss或者loadJs
function loadItem(url, list, setting, callback) {
// 如果加载的url为空，就直接成功返回
if (!url) {
setTimeout(function() {
onFinishLoading();
});
return;
}

if (cssExpr.test(url)) {
loadCss(url, setting, onFinishLoading);
} else {
loadJs(url, setting, onFinishLoading);
}

// 每次资源下载完成后，检验是否结束整个list下载过程
// 若已经完成所有下载，执行回调函数
function onFinishLoading() {
var urlIndex = list.indexOf(url);
if (urlIndex > -1) {
list.splice(urlIndex, 1);
}

if (list.length === 0) {
callback();
}
}
}

function doInit(list, setting, callback) {
var cb = function() {
callback && callback();
};

list = Array.prototype.slice.call(list || []);

if (list.length === 0) {
cb();
return;
}

for (var i = 0, len = list.length; i < len; i++) {
loadItem(list[i], list, setting, cb);
}
}

// 判断当前页面是否加载完
// 加载完，立刻执行下载
// 未加载完，等待页面load事件以后再进行下载
function ready(node, callback) {
if (isReady(node)) {
callback();
} else {
// 1500ms 以后，直接开始下载资源文件，不再等待load事件
var timeLeft = 1500;
var isExecute = false;
window.addEventListener('load', function() {
if (!isExecute) {
callback();
isExecute = true;
}
});

setTimeout(function() {
if (!isExecute) {
callback();
isExecute = true;
}
}, timeLeft);
}
}

// 暴露出去的Loader
// 提供async, sync两个函数
// async 用作异步下载执行用，不阻塞页面渲染
// sync 用作异步下载，顺序执行，保证下载的js按照数组顺序执行
var Loader = {
async: function(list, callback) {

ready(document, function() {
doInit(list, {}, callback);
});
},

sync: function(list, callback) {

ready(document, function() {
doInit(list, {
sync: true
}, callback);
});
}
};

window.Loader = Loader;

return Loader;
})(window, document);

 

   例如:

var list = ["../../static/common/js/util/jquery-1.9.1.min.js","../../static/common/js/util/template.js"]
Loader.async(list,function(){
    alert("111");
});