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()做图片预加载