標籤：pap win char ... pre 測試 alt 完成 image
SnandyIf you cannot hear the sound of the genuine in you, you will all of your life spend your days on the ends of strings that somebody else pulls.
JavaScript判斷圖片是否載入完成的三種方式有時需要擷取圖片的尺寸，這需要在圖片載入完成以後才可以。有三種方式實現，下面一一介紹。
一、load事件
<!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事件
<!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屬性
<!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>
js擷取圖片是否載入完畢
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
