判断图片是否加载完成/图片拼接到页面上后获得图片的宽度和高度出错/如何获得渲染后的图片的宽度和高度

问题：通过拼字符串将图片放到页面上，然后获得图片的宽度和高度，打印出来的图片的高度一直为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.youkuaiyun.com/kabulore/article/details/23296575

http://www.daqianduan.com/6419.html