自作自演

Firefox の話題を中心に Web 関係の話も扱うつもりの雑記。だった。
zisakuzien.exblog.jp

Top

画像の naturalWidth と naturalHeight とれるかな

naturalWidth、naturalHeight 便利ーって言っていたら
取れない時もあるよ。 と言われたので確認してみました。
使ったブラウザは 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 では実際表示した画像のサイズになりました。
[PR]
by tokage-shippo | 2013-02-05 22:49
Mozilla Firefox ブラウザ無料ダウンロード

about this...

書き手の名前は 晴柳祐志 と言います。


リンク

Twitter
いつか何とかしたいサイト

最新のトラックバック

[foxkeh]フォクす..
from 「 Firefox ×?=!..
[Firefox]Fir..
from +Sun Flower〜報告〜+
Firefoxバトン
from MなMによるMのための日記
スキン変更!
from SUKA・SUKA・BLOG
Firefox 1.5に..
from mmkg

検索

S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
XML | ATOM

個人情報保護
情報取得について
免責事項