當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript判断图片是否加载完成的三种方式

發布時間：2025/6/17 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 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判断图片是否加载完成的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。