js中Image对象以及对其预加载处理示例

165 阅读 0 评论 109 点赞

我是靠谱客的博主闪闪小鸽子，最近开发中收集的这篇文章主要介绍js中Image对象以及对其预加载处理示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

不显示在文档中的 Image 对象

对于不显示在文档中的 Image 对象时用 var 语句定义的：

复制代码代码如下:

 
var myImage = new Image();或 
var myImage = new Image(<图片地址字符串>); 

然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中，以下属性：lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用：预读图片(preload)。因为当对对象的 src 属性赋值的时候，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的 Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的。

预读图像的 JavaScript 例子

复制代码代码如下:

 
var imagePreload = new Image(); 

imagePreload.src = '001.gif'; 
imagePreload.src = '002.gif'; 
imagePreload.src = '003.gif'; 

以上例子适合预读少量图片。

复制代码代码如下:

 
function imagePreload() { 
var imgPreload = new Image(); 
for (i = 0; i < arguments.length; i++) { 
imgPreload.src = arguments[i]; 
} 
} 

imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif'); 

以上例子适合预读大量图片。

因为许多浏览器存在的缓存问题。当图片加载过一次之后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接请缓存中加载过来，经过分析，可以使用各个浏览器所兼容的Image的属性--complete。所以在图片onload事件之前先对这个值做下判断即可，如下例子：

复制代码代码如下:

 
function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象，实现图片的预下载 
img.src = url; 

if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 
callback.call(img); 
return; // 直接返回，不用再处理onload事件 
} 

img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
}; 