首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > 图片批量预加载

纯JS图片批量预加载技术代码

2009-11-03 23:19:20 作者：

一款实用的图片预加载技术，真正实现加载完成显示图片，加载过程中显示进度指示，本加载可以批量进行，将成批图片加载完成才显示，使用循环依次载入图片，并将路径暂存在数组中，加载完成后取出数组数据并显示。

<!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=gb2312" /> 
<title>图片批量加载</title> 
</head> 
<body> 
<div id="status" ></div> 
<div id="processing"></div> 
<script type="text/javascript"> 
function $id(id){ return document.getElementById(id);} 
function $c(tagName){ return document.createElement(tagName);} 
window.onload = function(){ 
imageLoad( { 
url:function(v){ 
v = []; 
for(var i=1; i<=8; i++){ 
v[v.length] = '//img.jbzj.com/demoimg/200911/wall_s'+i+'.jpg?_='+(new Date).getTime(); 
} 
return v; 
}, 
oncomplete: function(s){ 
$id('status').innerHTML = '正在加载...'+s.complete+'/'+s.total; 
$id('processing').innerHTML = this.src; 
}, 
complete:function(imgs, s){ 
var $r = $c('div'); 
$r.id = 'result'; 
$r.innerHTML = '计划加载:'+s.total+', 加载成功:'+s.load+'错误:'+s.error; 
document.body.appendChild($r); 
for(var i=0, l=imgs.length, $m; i<l; i++){ 
$m = $c('div'); 
$m.innerHTML = (imgs[i].loaded?'加载成功:':'加载失败:')+ imgs[i].src; 
document.body.appendChild($m); 
} 
} 
}); 
}; 
function imageLoad( s ){ 
    var urlset = [], undefined, toString = Object.prototype.toString; 
    switch( toString.apply(s.url) ){ 
        case '[object String]': urlset[urlset.length] = s.url; break; 
        case '[object Array]': if(!s.url.length){ return false; } urlset = s.url; break; 
        case '[object Function]': s.url = s.url(); return imageLoad( s ); 
        default: return false; 
    } 
    var imgset =[], r ={ total:urlset.length, load:0, error:0, abort:0, complete:0, currentIndex:0 }, timer, 
        _defaults = { 
            url:'', 
            onload: 'function', 
            onerror: 'function', 
            oncomplete: 'function', 
            ready: 'function', 
            complete: 'function', 
            timeout: 15 
        }; 
    for( var v in _defaults){ 
        s[v] = s[v]===undefined? _defaults[v]: s[v]; 
    } 
    s.timeout = parseInt( s.timeout ) || _defaults.timeout; 
    timer = setTimeout( _callback, s.timeout*1000); 
    for( var i=0,l=urlset.length,img; i<l; i++){ 
        img         = new Image(); 
        img.loaded    = false; 
        imgset[imgset.length] = img; 
    }    for( i=0,l=imgset.length; i<l; i++){ 
        imgset[i].onload     = function(){ _imageHandle.call(this, 'load', i ); }; 
        imgset[i].onerror     = function(){ _imageHandle.call(this, 'error', i ); }; 
        imgset[i].onabort     = function(){ _imageHandle.call(this, 'abort', i ); }; 
        imgset[i].src         = ''+urlset[i]; 
    } 
    if( _isFn(s.ready) ){ s.ready.call({}, imgset, r); }     
    function _imageHandle( handle, index ){ 
        r.currentIndex = index; 
        switch( handle ){ 
            case 'load': 
                this.onload = null; this.loaded = true; r.load++; 
                if( _isFn(s.onload) ){ s.onload.call(this, r); }     
                break;case 'error': r.error++; 
                if( _isFn(s.onerror) ){ s.onerror.call(this, r); } 
                break; 
            case 'abort': r.abort++; break; 
        } 
        r.complete++; 
        // oncomplete 事件回调 
        if( _isFn(s.oncomplete) ){ s.oncomplete.call(this, r); } 
        // 判断全局加载 
        if( r.complete===imgset.length ){ _callback(); } 
    } 
    function _callback(){ 
        clearTimeout( timer ); 
        if( _isFn(s.complete) ){ s.complete.call({}, imgset, r); } 
    } 
    function _isFn(fn){ return toString.apply(fn)==='[object Function]'; } 
    return true; 
} 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

纯JS图片批量预加载技术代码

您可能感兴趣的文章: