这篇文章主要介绍了 js 图片预加载示例, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
js 图片预加载简单示例
- function loadImage(url, callback) {
- if(url!='null') {
- var img = new Image();
- img.src = url;
- if(img.complete) {
- callback(img);
- } else {
- img.onload = function(){
- img.onload = null;
- callback(img);
- }
- }
- }
- }
- loadImage(pic_url,loadImage);
可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲,IE、Opera 表现正常,complete 始终为 false ;IE 的 readyState 始终为 uninitialized 。令人疑惑的是 FF,其中 Imgttmt.complete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了!如果换一张从来没有加载过的图片,FF 和 Chrom 的行为就一致了,都是一开始加载时, Imgttmt.complete 值为 false, 之后为 true!
经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE 是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,这和 IE 的 readyState 属性的表现一致!至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?众所周知,从缓存里加载东西的速度是很快的,那么在的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?
当包含上述代码的页面打开时并不载入 "tt.jpg" ,当点击按钮时候才载入。当载入完成后触发 onload 事件显示到页面上。如果你是第一次加载 "tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?IE、Opera 中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 "onload" 事件?是缓存机制?FF、Chrom 中,每点击一次加载一张该图片。
另一个详细详解示例
来源: