问题:通过拼字符串将图片放到页面上,然后获得图片的宽度和高度,打印出来的图片的高度一直为0。后来发现是由于图片渲染到页面需要一些时间,打印图片的宽度和高度的时候,img标签渲染上去了,但是图片还没有加载完成,导致出现问题。
解决方法:在图片加载完成后再获得图片的宽度和高度
$(window).load(function() {
// 图片加载完成后再操作
...
});
下面具体介绍判断图片是否加载完成的方法:
了解一下jquery的ready与window.onload的区别,ready只是dom结构加载完毕,便视为加载完成。(此时图片没有加载完毕),onload是指dom的生成和资源完全加载(比如flash、图片)出来后才执行。
一、load事件
1).单张图片(图片在文档中或图片动态生成)
<img id='xiu' src="http://www.daqianduan.com/wp-content/uploads/2014/11/hs-xiu.jpg">
<script>
$(document).ready(function(){
//jquery
$('#xiu').load(function(){
// 加载完成
});
//原生 onload
var xiu = document.getElementById('xiu')
xiu.onload = xiu.onreadystatechange = function(){
if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
// 加载完成
}
};
})
</script>
2) 多张图片
img[i].onload = function(){
//第i张图片加载完成
}
1、IE8及以下版本不支持onload事件,但支持onreadystatechange事件;
2、readyState是onreadystatechange事件的一个状态,值为loaded或complete的时候,表示已经加载完毕。
二、img的complete属性
<img src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt="">
<script>
// img的complate属性
var timer = setInterval(function(){
if ($("img").complete){
clearInterval(timer);
alert(1);
console.log($("img").complete)
}
}, 10);
</script>
询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
三、onreadystatechange事件
<img src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
$("img").onreadystatechange = function() {
if($("img").readyState=="complete"||$("img").readyState=="loaded"){
$("p").html('readystatechange:loaded');
}
}
</script>
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。
转载自:
https://www.cnblogs.com/snandy/p/3704938.html
https://www.cnblogs.com/mq0036/p/6278498.html
https://blog.csdn.net/kabulore/article/details/23296575
http://www.daqianduan.com/6419.html