在網(wǎng)上有很多關于判斷圖片是否已經(jīng)加載完畢的文章，但是有的瀏覽器并不適合，下面小編給大家分享一些有關JavaScript判斷圖片是否已經(jīng)加載完畢方法匯總，具體內(nèi)容如下所示：
一.onload事件
通過監(jiān)聽圖片的onload事件，可以判斷圖片是否已經(jīng)加載完成，兼容所有的瀏覽器（w3c推薦方法），代碼示例如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt=""><script>// 方法一：圖片已經(jīng)下載完document.getElementById('img1').onload = function(e){e.stopPropagation();alert(1);}</script></body></html> 二.判斷img對象（DOM）的complete屬性
當img加載完成之后，complete對象屬性將變?yōu)閠rue，代碼示例如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt=""><script>// 方法二：img的complate屬性var timer = setInterval(function(){if (document.getElementById('img1').complete){clearInterval(timer);alert(1);console.log(document.getElementById('img1').complete)}}, 10);</script></body></html> 親測該方法同樣可兼容所有瀏覽器
三.onreadystatechange事件
在ie下，img對象與xhr對象一樣具有onreadystatechange事件，可以通郭建廷該事件判斷圖片是否加載完成，代碼示例如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" alt=""><script>document.getElementById('img1').onreadystatechange = function() {if(document.getElementById('img1').readyState=="complete"||document.getElementById('img1').readyState=="loaded"){alert(1);}}</script></body></html> 該方法僅在ie下可用
新聞熱點
疑難解答
