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;
        };
    };
};