jquery预加载图片

<html>
<head>

</head>
<body>
<img id="img" src="https://www.baidu.com/img/bdlogo.png" width="" height="" border="0" alt="">
<textarea></textarea>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#img").load(function(){
	$(this).attr("src","http://www.louvre.fr/sites/default/files/imagecache/940x500/medias/medias_images/images/louvre-carrrousel-les-mythes-fondateurs-d-hercule-dark-vador.jpg?1444316034");
});
</script>
</body>
</html>

一般来说访问一个网站,如果图片很多再加上网络不好,可能会导致图片加载半天加载不出来,有时候没耐心的人就直接关闭网页了,这时候就需要我们做一个预加载机制,就是在图片刚开始加载的时候用一个临时图片的src替代原图片的src,等待临时图片加载完毕后,就让原图片的src替代临时图片的src,由于原图片的加载过程比较长,而临时图片加载过程比较快,就会出现临时图片一下就显示完毕,而浏览器还在慢慢加载原图片。这种机制对用户来说比较友好,容易产生亲切感。


js中onload方法的解释:

http://www.w3school.com.cn/jquery/event_load.asp

你可能感兴趣的:(jquery预加载图片)