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);
另一个详细详解示例
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。
看个例子:
复制代码 代码如下:
<input type="button" value="载入图片" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>
当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。
如果你是第一次加载 “tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?
IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 ”onload“ 事件?是缓存机制?
FF、Chrom中,每点击一次加载一张该图片。
稍微修改下:
复制代码 代码如下:
<input type="button" value="载入图片" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?
由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件!
联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!)
复制代码 代码如下:
<input type="button" value="complete" />
<input type="button" value="载入图片" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>
经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,
complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!
但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,
这和IE的 readyState 属性的表现一致!
至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?
众所周知,从缓存里加载东西的速度是很快的,那么在
复制代码 代码如下:
Img.src = isrc;
Img.onload = ...
的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?
这回加载一张根本不存在的图片看看效果:
复制代码 代码如下: