页面上,如何判断图片是否完全加载?
有时候,当用js动态获取服务器图片的时候,可能图片在服务器是不可用状态,这是需要重新获取。但是在页面,用什么方法判断图片是否完全加载了呢?期间LZ尝试了多种方法,最后得到了一种比较合理的方案。
因为,在jQuery中有一个error事件,可以通过绑定图片的error事件来监听图片是否完全加载。
1
2
3
4
5
6
7
8
|
$(document).ready( function () {
$( '#pbcimg' ).error( function (){
var src=$( this ).attr( "src" );
$( this ).attr( "src" , src + "?noCache=" + new Date().valueOf());
});
);
|
这样,在给<img/>动态指定src的时候,若出错,则会循环触发此事件,直到图片正确加载。
探寻之路:
之前是通过判断 img.readystate=="complete"||img.readystate=="loaded" 和 img.complete==true 的状态,再使用setTimeOut()来定时改变<img/>的src,但是这些属性有浏览器差异,有的浏览器无法获取到这些属性,从而导致不能及时clearTimeOut()来清除定时器。所以,这样浏览器将一直运行此定时。时间过长的话,将导致内存消耗太大。