當前位置：
首頁 >
JavaScript判断图片是否加载完成的三种方式
發布時間：2025/6/17
39
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JavaScript判断图片是否加载完成的三种方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、load事件
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE HTML> <html> <head> ??? <meta charset="utf-8"> ??? <title>img - load event</title> </head> <body> ??? <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> ??? <p id="p1">loading...</p> ??? <script type="text/javascript"> ??????? img1.onload = function() { ??????????? p1.innerHTML = 'loaded' ??????? } ??? </script> </body> </html> |
測試，所有瀏覽器都顯示出了“loaded”，說明所有瀏覽器都支持img的load事件。
二、readystatechange事件
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE HTML> <html> <head> ??? <meta charset="utf-8"> ??? <title>img - readystatechange event</title> </head> <body> ??? <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> ??? <p id="p1">loading...</p> ??? <script type="text/javascript"> ??????? img1.onreadystatechange = function() { ??????????? if(img1.readyState=="complete"||img1.readyState=="loaded"){ ??????????????? p1.innerHTML = 'readystatechange:loaded' ??????????? } ??????? } ??? </script> </body> </html> |
readyState為complete和loaded則表明圖片已經加載完畢。測試IE6-IE10支持該事件，其它瀏覽器不支持。
三、img的complete屬性
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE HTML> <html> <head> ??? <meta charset="utf-8"> ??? <title>img - complete attribute</title> </head> <body> ??? <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> ??? <p id="p1">loading...</p> ??? <script type="text/javascript"> ??????? function imgLoad(img, callback) { ??????????? var timer = setInterval(function() { ??????????????? if (img.complete) { ??????????????????? callback(img) ??????????????????? clearInterval(timer) ??????????????? } ??????????? }, 50) ??????? } ??????? imgLoad(img1, function() { ??????????? p1.innerHTML('加載完畢') ??????? }) ??? </script> </body> </html> |
輪詢不斷監測img的complete屬性，如果為true則表明圖片已經加載完畢，停止輪詢。該屬性所有瀏覽器都支持。
?
轉載于:https://www.cnblogs.com/xiaoxiaozhao/p/3705481.html
總結
以上是生活随笔為你收集整理的JavaScript判断图片是否加载完成的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： statspack系列8
- 下一篇： HTML5/CSS3/JavaScrip