javascript缓存图片到本地的实现代码
一种提高网站访问速度的方法，就是缓存图片的技术。
先将图片下载，放到缓存中，等到要加载图片时，再从缓存中直接加载到浏览器中。
Image对象的load事件是在图片加载完毕后激发的事件。
代码如下：
<html>
<head>
<title>随机图片</title>
</head>
<body>
<img src="img/flower.jpg"><br>
图片：<input type="text" name="showImgCount" size="60">
<script language="javascript" type="text/javascript">
<!--
//缓存图片到本地 by www.jbxue.com
//设置计数器，查看是否所有的图片都已经加载完毕
var imgCount = 0;
//创建数组，将图片存在数组中
var arr = new Array();
//通过循环，设置数组中的元素为一个图片对象，并设置图片的load事件
for (i=0;i<11;i++)
{
arr[i] = new Image();
//当一个图片加载完毕后检查是否所以图片都加载完毕，如果是的话，开始随机显示图片
arr[i].onload = imgOK;
}
//设置图片对象的src属性
arr[0].src = "img/img01.jpg";
arr[1].src = "img/img02.jpg";
arr[2].src = "img/img03.jpg";
arr[3].src = "img/img04.jpg";
arr[4].src = "img/img05.jpg";
arr[5].src = "img/img06.jpg";
arr[6].src = "img/img07.jpg";
arr[7].src = "img/img08.jpg";
arr[8].src = "img/img09.jpg";
arr[9].src = "img/img10.jpg";
arr[10].src = "img/img11.jpg";
//用于判断图片是否缓存完毕的函数
function imgOK()
{
//计数器自加1
imgCount++;
showImgCount.value = "正在加载第 " + imgCount + " 张图片";
//如果已经缓存完毕的图片数等于数组元素个数，则开始随机显示图片
if (imgCount==arr.length)
{
setInterval("showImg()",1000);
}
}
function showImg()
{
//设置随机数
var ran = Math.random();
ram = Math.round(ran*10);
//显示一个随机图片
document.images[0].src = arr[ram].src;
document.images[0].width = arr[ram].width * 0.15;
document.images[0].height = arr[ram].height * 0.15;
showImgCount.value = arr[ram].src;
}
-->
</script>
</body>
</html> 您可能感兴趣的文章：
javascript缓存图片到本地的实现代码
js判断图片是否被缓存的一例代码
js实现显示base64编码的二进制流图片
js image对象预加载图片的方法详解
javascript 使用image对象实现图片预加载方法详解
关于IE下图片的预加载过程
利用ASP.NET的三种缓存提高站点性能
JS如何清除IE浏览器缓存
图片img的src不变，浏览器重新加载的实现方法
JS实现图片预加载而无需等待的方法