画像のサイズを取得する必要がある場合があります。画像のサイズは、ロードされた後にのみロードする必要があります。方法を見つけますか？
1。イベントを読み込みます
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> IMG-ロードイベント</title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1">読み込み... </p>
<script type = "text/javascript">
img1.onload = function（）{
p1.innerhtml = 'loaded'
}
</script>
</body>
</html>
テストでは、すべてのブラウザが「ロード」を表示し、すべてのブラウザがIMGロードイベントをサポートしていることを示しています。
2。ReadyStateChangeイベント
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<title> img -readystatechangeイベント</title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1">読み込み... </p>
<script type = "text/javascript">
IMG1.OnreadyStateChange = function（）{
if（img1.readystate == "complete" || img1.readystate == "loaded"）{
p1.innerhtml = 'readystatechange：loaded'
}
}
</script>
</body>
</html>
ReadyStateは完全でロードされているため、画像がロードされていることを意味します。 IE6-IE10がこのイベントをサポートしていることをテストしますが、他のブラウザーはサポートしていません。
iii。 IMGの完全な属性
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<メタcharset = "utf-8">
<Title> IMG-完全な属性</title>
</head>
<body>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1">読み込み... </p>
<script type = "text/javascript">
関数imgload（img、callback）{
var timer = setInterval（function（）{
if（img.complete）{
コールバック（IMG）
ClearInterval（タイマー）
}
}、50）
}
imgload（img1、function（）{
p1.innerhtml（ 'loaded'）
}）
</script>
</body>
</html>
ポーリングは、IMGの完全な属性を継続的に監視します。真実の場合、それは画像がロードされ、ポーリングが停止することを意味します。このプロパティは、すべてのブラウザでサポートされています。