如今很多网站都实现了图库的功能，那么图片间的切换效果将直接影响用户体验，使用JavaScript的Image对象可以轻松实现图片的预加载，使图片间的切换更加流畅。看过一些关于Image对象实现预加载的文章，基本原理都差不多，在 JavaScript 中实例化一个新 Image对象，然后将需要载入的图片的 URL 作为参数传入，最后在onLoad事件中显示图片。本文的实现也是基于这个原理，并在此之上做了一些改进，在此分享给大家，希望大家多多指正。
Web图片浏览器的基本实现：
使用Image对象加载当前图片，图片加载时页面显示“Loading”字样，当图片完成加载后（触发onload事件）显示在页面上，代码如下：
1 <html>
2 <head>
3 <script language="javascript" type="text/javascript">
4 var urls = new Array(5);
5 urls[0] = "图片地址0"
6 urls[1] = "图片地址1"
7 urls[2] = "图片地址2"
8 urls[3] = "图片地址3"
9 urls[4] = "图片地址4"
10
11 var currentImageIndex = 0;
12 var input=document.getElementsByTagName("input");
13
14 function preLoadImage(url) {
15 var div=document.getElementsByTagName("div")[0];
16 var img = new Image();
17 div.innerHTML="<p>Loading...</p>";
18
19 img.onload = function () {
20 div.innerHTML = "";
21 div.style.width = String(img.width)+"px";
22 div.appendChild(img);
23 };
24
25 img.src = url;
26 }
27
28 function checkButtonsDisabled() {
29
30 if(currentImageIndex != 0){
31 input[0].disabled = "";
32 }else{
33 input[0].disabled = "disabled";
34 }
35
36 if(currentImageIndex != urls.length - 1){
37 input[1].disabled = "";
38 }else{
39 input[1].disabled = "disabled";
40 }
41 }
42
43 function showPreviousImage() {
44 currentImageIndex = currentImageIndex - 1;
45 checkButtonsDisabled();
46 preLoadImage(urls[currentImageIndex]);
47 }
48
49 function showNextImage() {
50 currentImageIndex = currentImageIndex + 1;
51 checkButtonsDisabled();
52 preLoadImage(urls[currentImageIndex]);
53 }
54
55 function show() {
56 preLoadImage(urls[currentImageIndex]);
57 }
58
59 window.onload=show;
60 </script>
61 <title>JavaScript实现图片预加载</title>
62 </head>
63 <body>
64 <div></div>
65 <br />
66 <input type="button" value="Previous" disabled="disabled" onclick="showPreviousImage()"/>
67 <input type="button" value="Next" onclick="showNextImage()"/>
68 </body>
69 </html>
改进一：预加载下一张图片
上述实现方法仅加载当前的图片，这样在图片初次加载时会首先显示“Loading”字样，尽管时间很短，但是会显得图片切换的过程不是很流畅。为了解决这个问题，我们需要做一个预加载的处理，一种实现方法是通过循环将所有图片一次性加载，但是当图片很多时便会使初次加载变得很慢；还有一种方法是使用另一个Image对象，在当前图片加载完成后预加载下一张图片，这样在切换图片时就不会看到“Loading”字样了，而且比较节省资源，改动后的代码如下：
1 ……
2
3 function preLoadImage(currentURL, nextURL) {
4 var currentImage = new Image();
5 var nextImage = new Image();
6 var div=document.getElementsByTagName("div")[0];
7 div.innerHTML="<p>Loading...</p>";
8
9 currentImage.onload = function () {
10 div.innerHTML = "";
11 div.style.width = String(currentImage.width) + "px";
12 div.appendChild(currentImage);
13
14 if(nextURL != undefined)
15 {
16 nextImage.src = nextURL;
17 }
18 };
19
20 currentImage.src = currentURL;
21 }
22
23 ……
24
25 function showPreviousImage() {
26 currentImageIndex = currentImageIndex - 1;
27 checkButtonsDisabled();
28 preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);
29 }
30
31 function showNextImage() {
32 currentImageIndex = currentImageIndex + 1;
33 checkButtonsDisabled();
34 preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);
35 }
36
37 function show() {
38 preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);
39 }
40
41 ……
改进二：相同图片只加载一次
通过上述改进图片间的切换已经流畅很多了，但是还有一个问题，虽然下一张图片已经存在本地缓存了，但是当切换到下一张图片时仍然要重新加载一次（见下图）
为了解决这一问题，我们使用动态插入div的方法，仍然是加载当前图片和下一张图片，每当加载完一张图片便将它放到div中插入页面，即页面中存在多张图片，但是仅显示一张，而且在图片加载前会首先判断该图片是否已经存在，如果存在就不重复加载（见下图）
改动后的代码如下：
1 ……
2
3 function preLoadImage(currentURL, nextURL) {
4 var div = document.getElementById("image_" + currentImageIndex);
5 if(div != undefined)
6 {
7 div.style.display = "";
8 }
9 else
10 {
11 //加载当前图片
12 var newDIV = document.createElement("div");
13 newDIV.innerHTML = "<p>Loading...</p>";
14 newDIV.id = "image_" + currentImageIndex;
15 document.getElementById("div_images").appendChild(newDIV);
16
17 var currentImage = new Image();
18 currentImage.onload = function () {
19 newDIV.innerHTML = "";
20 newDIV.style.width = String(currentImage.width) + "px";
21 newDIV.appendChild(currentImage);
22 };
23 currentImage.src = currentURL;
24 }
25
26 nextImageIndex = currentImageIndex + 1;
27 div = document.getElementById("image_" + nextImageIndex);
28 if(div == undefined && nextURL != undefined)
29 {
30 //预加载下一张图片
31 var nextDIV = document.createElement("div");
32 nextDIV.innerHTML = "<p>Loading...</p>";
33 nextDIV.id = "image_" + nextImageIndex;
34 nextDIV.style.display = "none";
35 document.getElementById("div_images").appendChild(nextDIV);
36
37 var nextImage = new Image();
38 nextImage.onload = function () {
39 nextDIV.innerHTML = "";
40 nextDIV.style.width = String(nextImage.width) + "px";
41 nextDIV.appendChild(nextImage);
42 };
43 nextImage.src = nextURL;
44 }
45 }
46
47 ……
48
49 function showPreviousImage() {
50 var div = document.getElementById("image_" + currentImageIndex);
51 div.style.display = "none";
52 currentImageIndex = currentImageIndex - 1;
53 checkButtonsDisabled();
54 preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);
55 }
56
57 function showNextImage() {
58 var div = document.getElementById("image_" + currentImageIndex);
59 div.style.display = "none";
60 currentImageIndex = currentImageIndex + 1;
61 checkButtonsDisabled();
62 preLoadImage(urls[currentImageIndex], urls[currentImageIndex + 1]);
63 }
64
65 ……
