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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 纯JS图片批量预加载技术代码

Javascript: jQuery生成asp.net服务器控件的代码; javascript 实现的完全兼容鼠标滚轴缩放图片的代码; JavaScript学习笔记（十七）js 优化; 使用SyntaxHighlighter实现HTML高亮显示代码的方法; javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系; 利用jQuery 实现GridView异步排序、分页的代码; jquery.lazyload 实现图片延迟加载jquery插件; Lazy Load 延迟加载图片的 jQuery 插件; jquery 插件实现图片延迟加载效果代码; javascript小数计算出现近似值的解决办法; jquery1.4后 jqDrag 拖动不可用; jquery 应用代码方便的排序功能; 选择TreeView控件的树状数据节点的JS方法(jquery); jquery 图片Silhouette Fadeins渐显效果; JQuery Dialog(JS 模态窗口,可拖拽的DIV); javascript 同时在IE和FireFox获取KeyCode的代码; js 键盘记录实现(兼容FireFox和IE); javascript 函数速查表; jQuery AnythingSlider滑动效果插件; 经典海量jQuery插件大家可以收藏一下

No. « ‹ 283 284 285 286 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 43 ::

收藏到网摘: n/a

CSS鼠标悬停菜单图片交换技术实现实用的层滑开js实现代码

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

<!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] = 'http://files.ruanchen.com/'+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 全选提示:你可先修改部分代码,再按运行]

CSS鼠标悬停菜单图片交换技术实现实用的层滑开js实现代码

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

评论 (0) All

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