图片缓存

有时候为了相应一些用户的点击，展示一张图片，图片比较大的化，当点击事件触发后，下载图片可能需要一段比较长的事件。这个时候我们可以用一些技术，当用户在做其他事情的时候，我们可以先把图片加载进来。

客户端js定义了一个专用的API来达到一个目的：为了强制让图片缓存起来，首先利用Image()构造函数来创建一个屏幕外图片对象，之后将该对象的src属性设置成期望的URL。

下面是两个代码判断：

一：

1 　　<div>
2         <script>
3         var image = new Image();
4         image.src = "http://snowinmay.net/test/10.jpg";
5         </script>
6         <img src="10-1.jpg" alt="图片" onmouseover="this.src='http://snowinmay.net/test/10.jpg'" onmouseout="this.src='10-1.jpg'">
7     </div>

二：

1 　　<div>
2         <img src="9-1.jpg" alt="图片" onmouseover="this.src='http://snowinmay.net/test/9.jpg'" onmouseout="this.src='9-1.jpg'">
3     </div>

代码一可以在加载页面的同时偷偷的加载10.jpg这个图片。当用户点击的时候，直接展现给用户。代码二的话页面加载的时候不加载9.jpg，只有当用户点击的时候才去加载图片，当网速不是很好的时候，就会有一个图片加载的过程。

下面给出两个具体的例子：

一：载入网页同时加载图片

http://snowinmay.net/index-419.html

二：载入网页的时候不加载图片

http://snowinmay.net/index-510.html

由这两个例子明显可以感觉到第二个页面在点击图片的时候有一个加载过程，而第一个页面则直接显示图片。

在一中多加的代码：

1 <script>
2         window.onload = function(){
3             var image = new Image();
4             for (var i = 1; i <= 9; i++) {
5             var    url = "http://snowinmay.net/img/" + i + ".png";
6                 image.src = url;
7             };
8         }
9     </script>

 

注意：

1.做测试的时候需要清除缓存。

2.需要让页面加载完再测试。