img的complete和onload

HTML DOM complete 属性

定义和用法:

complete 属性可返回浏览器是否已完成对图像的加载。

若是加载完成，则返回 true，不然返回 fasle。

语法:

imageObject.complete

 

Image onload 事件

定义和用法:

onload 事件在图片加载完成后当即执行。

语法

onload="JavaScriptCode"

 

complete只是HTMLImageElement对象的一个属性，而onload则是这个Image对象的load事件回调，前者不能准确的在事件发生时进行异步回调而且在浏览器的兼容性上也有些问题。

 这二者，只有img.complete能够判断图片加载完成，img.onload并不能判断图片是否加载完，而是在加载完毕以后，直接运行onload绑定的函数。

 

img加载完成就会解除onload事件，src是异步加载图片的，若是在绑定事件前就已经加载完成，onload事件不会触发。img.complete是一直都有的属性，加载完成后为true。

 

img.onload是当一张图片被加载完成后所触发的事件
实现图片显示功能；
<div>
<img id="img"/>
</div>

js部分：img.src="图片";
img.onload=showImg；
function showImg(){
   代码部分。。。。

}

对于 complete 属性来说，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 true ，不然一直是 false ，和之前是否加载过该张图片没有关系，即和缓存没有关系！这里要注意，显示与否和img.style.display无关；

JS部分： alert（img.complete）;----->false
img.src="图片";
alert(img.complete);------->//若是上面“图片”获取的时间比JS代码顺序执行的时间要长，那么这里就是false，不然就是true。

 

下面看一个例子:
<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
    function addImg(isrc){
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function () {
              document.body.appendChild(Img);
        }
    }
</script>

当页面打开后，点击按钮后，会显示tt.jpg，可是若是重复点击会怎样呢？在IE中，除了第一次加载 图片时候显示正常，以后再点击就没有反应了，刷新也同样。FF中，每点击一次加载一张该图片。而这是什么缘由呢？是由于在IE中只执行了一次onload或者是缓存的问题吗？先改写一下代码，

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
    function addImg(isrc){
        var Img = new Image();
        Img.onload = function (){
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
</script>

如今再点击图片，就正常了，因而可知不是由于IE没有触发onload事件，而是由于IE中加载缓冲区的速度太快，以致于没有运行到img.onload的时候，图片已经被加载完毕了。所以，能够先告诉浏览器如何处理这张图片，而后再制定这张图片的来源。通常状况下，能够用complete来判断图片是否加载完毕。对于 complete 属性来说，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为true ，不然一直是false ，和之前是否加载过该张图片没有关系，即和缓存没有关系！能够写以下的函数来作到各个浏览器中预加载图片的兼容性。

var imgLoad = function (url) {
    var img = new Image();
    img.src = url;
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
            img.onload = null;
        };
    };
};