画像の naturalWidth と naturalHeight とれるかな
naturalWidth、naturalHeight 便利ーって言っていたら
使ったブラウザは Firefox 18 です。
■仮説
DOM の解釈後から画像の読み込みまでは、
naturalWidth、naturalHeight が取得できないのではないかと予想しました。
表示できるところから表示して、画像は大きいかもしれないから後から読み込む、
という方がユーザに親切というか、遅い回線はそんな感じに見えるので。
従って、DOMContentLoaded と load イベントそれぞれの発生時点で取得できるか確認します。
■下準備
ローカルで検証すると、画像がすごい早さで取得できてしまいそうなので
PHP で決まった秒数 sleep してから応答するスクリプトを用意しました。
参考・PHP/画像のレスポンスを返す - 俺の基地
PHP 5.4 以上が入っていれば、ビルトインウェブサーバでさくっと試せます。
書いたスクリプトのあるディレクトリに移動して、
PHP: ビルトインウェブサーバー - Manual
■検証用 HTML と JavaScript
■結果
DOMContentLoaded
Tue Feb 05 2013 22:33:54 GMT+0900 (JST)
width: 0
height: 0
load
Tue Feb 05 2013 22:33:57 GMT+0900 (JST)
width: 500
height: 625
DOMContentLoaded イベントの発生時点では 0 となってしまっていますが、
load イベントの発生後はきちんと使った画像のサイズを取得できています。
ただ、画像が一度読み込まれていると(普通にリロードすると)
DOMContentLoaded の段階で、前回読み込んだ画像のサイズが取得できました。
ページのリロード前に、画像を差し替えサイズを変えてやると
DOMContentLoaded では前回読み込み時のサイズ、
load では実際表示した画像のサイズになりました。
取れない時もあるよ。と言われたので確認してみました。
使ったブラウザは Firefox 18 です。
■仮説
DOM の解釈後から画像の読み込みまでは、
naturalWidth、naturalHeight が取得できないのではないかと予想しました。
表示できるところから表示して、画像は大きいかもしれないから後から読み込む、
という方がユーザに親切というか、遅い回線はそんな感じに見えるので。
従って、DOMContentLoaded と load イベントそれぞれの発生時点で取得できるか確認します。
■下準備
ローカルで検証すると、画像がすごい早さで取得できてしまいそうなので
PHP で決まった秒数 sleep してから応答するスクリプトを用意しました。
参考・PHP/画像のレスポンスを返す - 俺の基地
// 遅延秒数 (0未満か指定なしなら1秒にする。0秒の指定はありにしておく。)
$seconds = (int)$_GET['sec'];
if ($seconds < 0) $seconds = 1;
sleep($seconds);
header('Content-Type: image/png');
readfile('./hiyoko-01.png');
exit();
PHP 5.4 以上が入っていれば、ビルトインウェブサーバでさくっと試せます。
書いたスクリプトのあるディレクトリに移動して、
php -S localhost:8000とかすればサーバが立ち上がります。
PHP: ビルトインウェブサーバー - Manual
■検証用 HTML と JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>画像の naturalWidth と naturalHeight とれるかな</title>
</head>
<body>
<script>
var listener = function(evt){
// ブログの都合でドットが全角になってるが実際は半角
var image = document．getElementById('image');
var out = [];
out.push(evt.type);
out.push(new Date().toString());
out.push(' width: ' + image.naturalWidth);
out.push('height: ' + image.naturalHeight);
console.log(out.join('\n'));
};
window.addEventListener('DOMContentLoaded', listener, false);
window.addEventListener('load', listener, false);
</script>
<img id="image" src="http://localhost:8000/?sec=3" />
</body>
</html>
■結果
DOMContentLoaded
Tue Feb 05 2013 22:33:54 GMT+0900 (JST)
width: 0
height: 0
load
Tue Feb 05 2013 22:33:57 GMT+0900 (JST)
width: 500
height: 625
DOMContentLoaded イベントの発生時点では 0 となってしまっていますが、
load イベントの発生後はきちんと使った画像のサイズを取得できています。
ただ、画像が一度読み込まれていると(普通にリロードすると)
DOMContentLoaded の段階で、前回読み込んだ画像のサイズが取得できました。
ページのリロード前に、画像を差し替えサイズを変えてやると
DOMContentLoaded では前回読み込み時のサイズ、
load では実際表示した画像のサイズになりました。
by tokage-shippo
| 2013-02-05 22:49
