代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script type="text/javascript">
<!--
function doit(){
//todo
}
window.hui = {util:{}};
hui.util.preload = function (opt, callback) {
var me = hui.util.preload,
arr = Object.prototype.toString.call(opt) === '[object Array]' ? opt :
(opt && Object.prototype.toString.call(opt.list) === '[object Array]' ? opt.list : []) ;
if (!me.loaded && !me.left) {me.init();}
var str,
list = [];
for (var i=0,len=arr.length; i<len; i++) {
str = arr[i] ? String(arr[i]).replace(/^\s+|\s+$/g, '') : '';
if (str) {
list.push(str);
}
}
if (!list.length) {
return callback();
}
me.onloadAllCallback = callback;
me.finished = false;
me.left = list;
me.loading = [].concat(list);
me.maxCount = opt.maxCount;
me.loadLeft();
};
hui.util.preload.init = function () {
hui.util.preload.left = [];
hui.util.preload.list = [];
hui.util.preload.loaded = [];
hui.util.preload.finished = false;
hui.util.preload.onloadAllCallback = new Function();
var wrap = document.getElementById('preload_wrap');
if (!wrap) {
wrap = document.createElement('DIV');
wrap.id = 'preload_wrap';
var parent = document.body || document.documentElement;
if (parent.firstChild) {
parent.insertBefore(wrap, parent.firstChild);
}
else {
parent.appendChild(wrap);
}
}
wrap.style.position = 'absolute';
wrap.style.zIndex = 999999;
wrap.style.left = '-299px';
wrap.style.top = '10px';
wrap.style.width = '300px';
wrap.style.height = '400px';
wrap.style.overflow = 'hidden';
};
hui.util.preload.loadNext = function (list) {
var wrap = document.getElementById('preload_wrap'),
container = document.createDocumentFragment(),
div = document.createElement('DIV'),
img;
for (var i=0,ilen=list.length; i<ilen; i++) {
div.innerHTML = '<img onload="hui.util.preload.onloadCallback(this)" width="10" height="10" />';
img = div.firstChild && div.firstChild.onload ? div.firstChild : div.firstChild.nextSibling;
img.src = list[i];
img.setAttribute('str', list[i]);
container.appendChild(img);
}
wrap.appendChild(container);
};
hui.util.preload.loadLeft = function () {
var me = hui.util.preload,
count;
if (me.left && me.left.length) {
count = me.maxCount || me.left.length;
me.loadNext(me.left.splice(0, count));
}
};
hui.util.preload.onloadCallback = function (elem) {
var me = hui.util.preload,
src = elem.getAttribute('str');
if (!me.loaded && !me.left) {
me.init();
}
me.loaded.push(src);
for (var i=me.loading.length-1; i>-1; i--) {
if (me.loading[i] === src) {
me.loading.splice(i, 1);
}
}
if (!me.finished && me.loading.length < 1 && me.left.length < 1) {
me.finished = true;
me.onloadAllCallback();
}
else {
me.loadLeft();
}
};
hui.util.preload(['img/big (1).png','img/big (2).png','img/big (3).png','img/big (4).png','img/big3.png','img/big3.png','img/step01_z1.jpg'],function(){alert(123);});
//-->
</script>
</head>
<body>
<div id="preload_wrap"><img src="img/big (1).png" str="img/big (1).png" onload="hui.util.preload.onloadCallback(this)"><img src="img/big (2).png" str="img/big (2).png" onload="hui.util.preload.onloadCallback(this)"><img src="img/big (3).png" str="img/big (3).png" onload="hui.util.preload.onloadCallback(this)"><img src="img/big (4).png" str="img/big (4).png" onload="hui.util.preload.onloadCallback(this)"><img src="img/big3.png" str="img/big3.png" onload="hui.util.preload.onloadCallback(this)"><img src="img/big3.png" str="img/big3.png" onload="hui.util.preload.onloadCallback(this)"><img src="img/step01_z1.jpg" str="img/step01_z1.jpg" onload="hui.util.preload.onloadCallback(this)"></div>
<script>
hui.util.preload(['img/big (1).png','img/big (2).png','img/big (3).png','img/big (4).png','img/big3.png','img/big3.png','img/step01_z1.jpg'],function(){alert(1234);});
</script>
<button type="button" onclick="doit()">doit</button>
</body>
</html>