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对象
    }
;
}
;

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值