首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript 读取图片

JavaScript 读取图片实例代码

2009-11-16 21:22:26 作者：

本章主要介绍通过JavaScript读取图片的例子，本例子不包含服务器端后台代码，只包含前台页面代码，所以直接用Html文件就可以，代码如下，因为包含详细的注意，所以不再详细说明了，如果有看不明白的，可以给我留言，我给大家具体答复。

<!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"] , ["images/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 id="load" style="display=yes" style="display=yes"></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 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需刷新才能执行]

JavaScript 读取图片实例代码

您可能感兴趣的文章: