JavaScript 读取图片实例代码

时间:2020-05-12 人气:0

<!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> 
<title>Untitled Page</title> 
<title>JavaScript读取图片测试例子</title> 
<script language=javascript><!--

var Gif=[["images/smilies/","victory","sweat","loveliness","call","handshake","kiss","time","hug","lol","mad","funk"] , ["imageshttps://img.qb5200.com/download-x/default/","reply","newtopic","newspecial","star_level2","star_level2","top","star_level3","star_level2"]]; 
// 第一个是路径，后面的名称，比如 ["talk/",129,130,501,502,503] ，就是talk/ 目录下的129.gif,130.gif ...... 如果是字符串，就要加引号 
var picType = ".gif"; //图片类型，如果你要显示所有类型图片，你可以把图片类型也放到数组里面

//加载图片主函数 
function LoadGif() 
{ 
document.body.insertAdjacentHTML("beforeEnd",'<div></div>'); 
var a = 0; 
var b = 1;

Loading(a,b); 
}

//显示加载失败信息 
function Gif_Err() 
{ 
alert("载入失败！") 
}

//显示加载成功信息 
function Gif_End() 
{ 
alert("载入完成！") 
}

//加载图片，并显示 
function Loading(a,b) 
{ 
//当数组元素为空时，切换数组的一维 
if (!Gif[a][b]) 
{ 
a++; 
b=1; 
}

//当数组遍历完成后，显示图片 
if (a==Gif.length) 
{ 
Gif_End(); 
return; 
}

//显示每次读取的图片 
document.getElementById("load").innerHTML +='<img onerror="javascript:this.src='/skin1/img/error.jpg';" src="'+Gif[a][0]+Gif[a][b++]+ picType + '" src="'+Gif[a][0]+Gif[a][b++]+ picType + '" onerror="Gif_Err()">'; 
//递归读取图片 
Loading(a,b); 
}

// --></script> 
</head> 
<body onload="LoadGif()">

</body> 
</html>

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

加载全部内容