js判断图片加载完成

Posted 2020-07-05

判断图片是否加载完成有三种方式。

一、load事件

img.onload = function() {

  alert(‘加载完毕‘); 

}

测试，所有浏览器都显示出了“加载完毕”，说明所有浏览器都支持img的load事件。

 

二、readystatechange事件

          img.onreadystatechange = function() {

            if(img.readyState=="complete"||img.readyState=="loaded"){

                alert(‘加载完毕‘)

            }

        }

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

 

三、complete属性

          function imgLoad(img, fn) {

            var timer = setInterval(function() {

                if (img.complete) {

                    fn()

                }

            }, 50)

        }

        imgLoad(img, function() {

            alert(‘加载完毕‘);

        })

 

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。