您的位置：首页 > Web前端 > JavaScript

Javascript兑现图片预加载【回调函数，多张图片】 (转载)

2014-01-23 10:25 330 查看

Javascript实现图片预加载【回调函数，多张图片】

使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中，需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时，就需要考虑把这个功能封装为一个通用方法。

（1）下面为JS实现图片预加载方法loadImages()：

//实现一系列图片的预加载
//参数sources:图片信息关联数组
//参数callback:回调函数——图片预加载完成后立即执行此函数。
function loadImages(sources, callback){
var count = 0,
images ={},
imgNum = 0;
for(src in sources){
imgNum++;
}
for(src in sources){
images[src] = new Image();
images[src].onload = function(){
if(++count >= imgNum){
callback(images);
}
}
images[src].src = sources[src];
}
}

（2）在JS中调用预加载函数：

//存储图片链接信息的关联数组
var sources = {
ietoHell : "img/IEtoHell.jpg",
fuckIE : "img/fuckIE.jpg"
};

//调用图片预加载函数，实现回调函数
loadImages(sources, function(images){
//TO-DO something
ctx.drawImage(images.ietoHell, 20,20,100,100);
ctx.drawImage(images.fuckIE, 140,20,100,100);
});

注意事项：

（1）先绑定image.onload事件，后加载图片

images[src] = new Image();
images[src].onload = function(){
if(++count >= imgNum){
callback(images);
}
}
images[src].src = sources[src];

原因：如果图片从缓存中加载，速度非常快以至于没来得及绑定事件就加载完毕，自然不会触发绑定事件。

（2）for...in循环与 for循环的区别

for循环用于迭代数组（array）

for...in循环用于迭代对象（object, {}）或者关联数组（hash array）

原文地址：http://www.myexception.cn/javascript/408426.html

下面是小练习：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

</head>

<body>
<a onClick="newload()">点击</a>
<img src="myFocus_white.gif" id="im0" />
<img src="myFocus_white.gif" id="im1"/>
<img src="myFocus_white.gif" id="im2"/>
<img src="myFocus_white.gif" id="im3"/>
<img src="myFocus_white.gif" id="im4"/>
<img src="myFocus_white.gif" id="im5"/>
<img src="myFocus_white.gif" id="im6"/>
<img src="myFocus_white.gif" id="im7"/>
</body>
<script type="text/javascript">
//存储图片链接信息的关联数组
var sources = {
im0 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_1.png",
im1 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_2.png",
im2 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_3.png",
im3 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_4.png",
im4 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_5.png",
im5 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_6.png",
im6 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_7.png",
im7 : "http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_8.png"
};
//用于计算对象成员和数组成员个数
function count(o){
var t = typeof o;
if(t == 'string'){
return o.length;
}else if(t == 'object'){
var n = 0;
for(var i in o){
n++;
}
return n;
}
return false;
}

//调用图片预加载函数，实现回调函数
loadImages(sources, function(images){
//TO-DO something
for(var i=0; i<count(images); i++)
{
oid = "im"+i;
document.getElementById(oid).src = images[oid].src;
}});

function loadImages(sources, callback){
var count = 0,
images ={},
imgNum = 0;
for(src in sources){
imgNum++;
}
for(var src in sources){
images[src] = new Image();
//document.getElementById(src).src = images[src].src;
images[src].onload = function(){
if(++count >= imgNum){
images[src].onload= null;
callback(images);
}
}
images[src].src = sources[src];
}
}
function newload(){alert("预加载到底完成没？")}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航