ファイルのサイズを取得する

ページのサイズを取得する

<script type="text/javascript">
<!--
document.write("このページは " + document.fileSize + " バイトです。");
// -->
</script>

※取得するサイズはページのファイルのみなので画像等は含まれません。なお、Internet Explorer のみ動作いたしますが、Internet Explorer 11 では document.fileSize は使用不可になりました。IE11 の互換性の変更点

ページ内の特定の画像のファイルサイズを取得する（名前で取得）

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
window.onload = function() {
	if (document.fileSize) {
		var size = document.all("pic").fileSize;
		document.all("result").innerHTML = "この画像は " + size + " バイトです。";
	}
}
// -->
</script>
</head>
<body>
<img src="./image.gif" alt="" name="pic"><span id="result">&nbsp;</span>
</body>
</html>

上記のようにサイズを取得したいエレメントに fileSize として、id 指定したエレメントに表示 (innerHTML) します。なお、Macintosh 版の Internet Explorer では、エレメントに指定した場合の取得はできないようです。(Mac IE 5.14 で確認)

ページ内の全ての画像のファイルサイズを取得する（ページの上から順に取得）

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
window.onload = function() {
	if (document.fileSize) {
		for (var i = 0; i < document.images.length; i++) {
			var size = parseFloat(document.images[i].fileSize);
			document.images[i].title = size + " Bytes";
		}
	}
}
// -->
</script>
</head>
<body>
<img src="./image1.gif" alt="">
  :
  :
<img src="./image6.gif" alt="">
</body>
</html>

for 文でこのページ内の画像ファイルのサイズを全て取得します。document.images.length は、このページの画像の個数という意味です。念のためにファイルサイズを parseFloat() で数値にして取得します。それをそれぞれの画像に対して、ツールチップ表示します。

この例では、画像にマウスがポイントした時ファイルサイズが表示されます。

ページ内のファイルサイズを取得する

<script type="text/javascript">
<!--
window.onload = function() {
	if (!document.fileSize) return;

	var size = parseFloat(document.fileSize);
	for (var i = 0; i < document.images.length; i++) {
		size += parseFloat(document.images[i].fileSize);
	}
	window.status = "このページは " + size + " バイトです。";
}
// -->
</script>

このようにページ自体のサイズとページ内の画像のサイズを複合代入して取得します。（body タグに指定した画像と外部スタイルシート等のサイズは含まれません）