返回列表

图片预加载

默认分类 2014/09/19 00:57

代码如下:

<!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>