预加载图片的小技巧
在做ex5-5(跟随鼠标移动显示大图)作业的时候，想要实现一个功能：即图片不能显示的话，就给把该图片设置为一个替代的loading图片。
1.使用Image对象做图片预加载(preload)
我们还是先来看一下代码：
JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
| aLi[i].onmouseover = function ()
{
var oImg = document.createElement("img");
//图片预加载
var img = new Image();
img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
//插入大图片
oBig.appendChild(oImg);
//显示big层
oBig.style.display = oLoading.style.display = "block";
//判断大图是否加载成功
img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";})
};
|
其实像下面这样写就可以，功能还很清晰，不知道ex5-5的原作者多var出来一个oImg有什么用???等以后我明白了再回来补充。
1
2
3
4
5
6
7
8
9
10
11
12
| aLi[i].onmouseover = function ()
{
//图片预加载
var img = new Image();
img.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg");
//插入大图片
oBig.appendChild(img);
//显示big层
oBig.style.display = oLoading.style.display = "block";
//判断大图是否加载成功
img.complete ? oLoading.style.display = "none" : (img.onload = function() {oLoading.style.display = "none";})
};
|
下面是分析：
首先要明白一点：”![]()
“标签每出现一次，一个 Image 对象就会被创建。所以上面的oImg也是个Image对象。但是现在还不明白为何要多出来个它？？？
当定义Image对象的src属性时，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片,所以定义img.src和oImg.src就相当于给浏览器缓存(preload)了一张图片。然后到真正要把图片加载到浏览器中(即img.onload)的时候，就可以立刻使用缓存的图片了。
2.使用Image对象的complete属性来判断浏览器是否已完成对图像的加载
在该例子中，当我们第一次打开页面时，鼠标移入任意aLi[i]都是第一次，这时浏览器会缓存这张预加载的大图，但是还没有将它加载到浏览器中。所以第一次执行这段代码img.complete一定是返回false,则执行
1
2
3
| img.onload=function(){
loading.style.display="none";
}
|
这里oImg[0].onload的作用就是把图片加载(load)到浏览器中，然后当图片加载完成后再执行花括号的内容，即将oLoading图片所在层隐藏（这样就会出现第一次鼠标移入图片时的闪现loading图片的效果），若是图片出现错误，则会一直显示oLoading层的图片。
然后等我们鼠标第2、3…..n次移入该aLi[i]层的时候，因为图片已经加载过一次，如果再有对该图片的请求(即img.src)时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来,此时img.complete就会一直返回true，所以oLoading层的图片就会一直被隐藏。
详细用法请见
预加载的简便理解