javascript图片对象

javascript图片对象
1、生成
var img = new Image();
2、图片对象的属性
width\height\border\complete\hspace\lowsrc\name\src\vspace
3、图片对象的方法
onabort\onerror\onload\onkeydown\onkeyup\onkeypress
4、关于图片缓存
如果图片已经在缓存中:
1)浏览器不会发起请求去请求图片,浏览器直接从缓存中拿图片。
2)而设置过期时间会强迫浏览器在访问页面的时候去请求图片,如果图片已经在缓存中,并且正在被重新请求,浏览器会把最后修改时间加入在HTTP头中,这就是传统的GET请求,如果图片没有被修改,服务器会返回一个304代码,所以对于浏览器的请求服务器会返回下面的两种代码:
200–浏览器没有缓存。
304–浏览器已经缓存了图片,但是需要验证最后修改时间
5、关于图片对象的complete属性
在IE下,如果浏览器缓存了这张图片,那么浏览器直接从缓存中拿图片,而不会发起请求,那么不会触发图片onload事件;在chrome和FireFox以及opera下,浏览器会发出这两种加载方式,既去缓冲区取图片又发起请求,所以会触发图片onload事件。
那么基于这两种加载方式,浏览器怎么确定图片是否加载成功了呢,这时就要用到图片对象的complete属性了。complete属性告诉浏览器图片是否加载成功,如果是从缓存中取,complete属性直接表示已经完成,如果是从HTTP请求加载时,请求过程中显示未完成,请求结束时显示已完成。图片加载监听的是其src属性,有src属性,则图片开始加载(或从缓存中取或发起请求或者两者同时进行,所以同一个src则只会请求一次,如果要强制请求,可以使得src不同,方法是图片地址加时间戳:

<script type="text/javascript">
var t =new Date();
var img = new Image();
img.src = 'http://0.ss.faisys.com/image/imageEffects/imageEffetc_magnifier.png?v=201411041445&t=' + t.getTime();
</script>

参考文章:js的 new image()做图片预加载

此条目发表在PHP, 浏览器分类目录。将固定链接加入收藏夹。

1 则回应给 javascript图片对象

  1. herbert说:

    关于第4点,在网上找了很久,,终于找到了。。。感谢

herbert进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注