画像が読み込まれる間に「now loading...」と表示されますが、

javascript や ajax 等を使用し、且つ、読込み状態を"%"でを表示し、
アニメーション画像を作るやり方はありませんか?

flashを使わない方法で、
何か参考になるページやdemoページがあればお教え下さい。


宜しくお願い致します。

回答の条件
  • 1人10回まで
  • 登録:2010/01/29 19:37:26
  • 終了:2010/02/05 19:40:02

ベストアンサー

id:ofk No.4

ofk回答回数12ベストアンサー獲得回数32010/01/31 11:48:41

ポイント20pt

imgはどの程度読み込みを行ったかを取得する方法がありません。

しかし、ブラウザサポートがFirefoxだけであり、画像は同一ドメインであれば、XMLHttpRequestで読み込みを行って、dataURI出力する方法があります。以下にサンプルを示します。

<html>
<body>
<img src="img.jpg">
<script>
for (var i = 0, imgs = document.images; img = imgs[i]; ++i)
	load(img);

function load(img) {
	var filepath = img.src;
	img.src = "";
	var div = img.parentNode.insertBefore(document.createElement("div"), img);
	var xhr = new XMLHttpRequest;
	xhr.open("GET", filepath, true);
	xhr.onload = function () {
		div.innerHTML = "100%";
		img.src = [
			"data:",
			xhr.getResponseHeader("Content-Type"),
			";base64,",
			btoa(xhr.responseText.replace(/[\u0100-\uffff]/g, function($0) {
				return String.fromCharCode($0.charCodeAt(0) & 0xff);
			}))
		].join("");
	};
	xhr.overrideMimeType("text/plain; charset=x-user-defined");
	xhr.send(null);
	var tid = setInterval(function () {
		if (xhr.readyState !== 4) {
			var length = xhr.getResponseHeader("Content-Length");
			div.innerHTML = (length ? Math.round(xhr.responseText.length / length) : 0) + "%";
		}
	}, 50);
}
</script>
</body>
</html>

適切な画像を用意した上で、Content-Length等を適切に返すサーバー上で実行して下さい。

IEでは現行ではdataURIによる出力をサポートしていないので不可能でしょう。ほとんど、GM_xmlhttpRequestに移植してのユーザスクリプト専用コードと言えます。参考になれば幸いです。

id:mune0628

ご回答ありがとうございます。

しかし、サポートするブラウザはFirefox、IE、Saafriなので、このやり方では難しそうです…。

せっかく頂いたコードなので、今後の勉強に役立たせて頂きたいと思います。

イメージを20%読み込んだ時に01.jpg

イメージを40%読み込んだ時に02.jpg

イメージを60%読み込んだ時に03.jpg

イメージを80%読み込んだ時に04.jpg

イメージを100%読み込んだ時に05.jpg

等と指定する方法はないものなのでしょうか?

ご連絡お待ちしております。何卒宜しくお願い致します。

2010/02/01 23:31:09

その他の回答(4件)

id:km1967 No.1

km1967回答回数541ベストアンサー獲得回数402010/01/29 19:42:58

ポイント20pt

%表示は原理的にできません。


インジケータなら表示できます。

http://allabout.co.jp/internet/javascript/closeup/CU20060315A/

id:mune0628

早速のご解答ありがとうございます。

%はflashでないと駄目ですか・・・。。

他の方の回答をお待ちします。

2010/01/29 19:46:23
id:hayato-0130 No.2

haya回答回数56ベストアンサー獲得回数32010/01/29 20:15:11

ポイント20pt

すでに出ているようですが%表示はやはり不可能かと・・・・

すいません

id:mune0628

ご回答ありがとうございます。

他の方からのご意見をお待ちします。

2010/02/01 08:32:56
id:orz66 No.3

orz66回答回数106ベストアンサー獲得回数112010/01/29 20:33:48

ポイント20pt

これが参考になればいいんですが

http://www.bram.us/projects/js_bramus/jsprogressbarhandler/

id:mune0628

ご回答ありがとうございます!

まさにJSを使った実装方法ですね。

このやり方で任意のアニメーションGIFを使用する事は出来ますでしょうか?

もしご存知でしたらお教え願います。

2010/02/01 08:34:55
id:ofk No.4

ofk回答回数12ベストアンサー獲得回数32010/01/31 11:48:41ここでベストアンサー

ポイント20pt

imgはどの程度読み込みを行ったかを取得する方法がありません。

しかし、ブラウザサポートがFirefoxだけであり、画像は同一ドメインであれば、XMLHttpRequestで読み込みを行って、dataURI出力する方法があります。以下にサンプルを示します。

<html>
<body>
<img src="img.jpg">
<script>
for (var i = 0, imgs = document.images; img = imgs[i]; ++i)
	load(img);

function load(img) {
	var filepath = img.src;
	img.src = "";
	var div = img.parentNode.insertBefore(document.createElement("div"), img);
	var xhr = new XMLHttpRequest;
	xhr.open("GET", filepath, true);
	xhr.onload = function () {
		div.innerHTML = "100%";
		img.src = [
			"data:",
			xhr.getResponseHeader("Content-Type"),
			";base64,",
			btoa(xhr.responseText.replace(/[\u0100-\uffff]/g, function($0) {
				return String.fromCharCode($0.charCodeAt(0) & 0xff);
			}))
		].join("");
	};
	xhr.overrideMimeType("text/plain; charset=x-user-defined");
	xhr.send(null);
	var tid = setInterval(function () {
		if (xhr.readyState !== 4) {
			var length = xhr.getResponseHeader("Content-Length");
			div.innerHTML = (length ? Math.round(xhr.responseText.length / length) : 0) + "%";
		}
	}, 50);
}
</script>
</body>
</html>

適切な画像を用意した上で、Content-Length等を適切に返すサーバー上で実行して下さい。

IEでは現行ではdataURIによる出力をサポートしていないので不可能でしょう。ほとんど、GM_xmlhttpRequestに移植してのユーザスクリプト専用コードと言えます。参考になれば幸いです。

id:mune0628

ご回答ありがとうございます。

しかし、サポートするブラウザはFirefox、IE、Saafriなので、このやり方では難しそうです…。

せっかく頂いたコードなので、今後の勉強に役立たせて頂きたいと思います。

イメージを20%読み込んだ時に01.jpg

イメージを40%読み込んだ時に02.jpg

イメージを60%読み込んだ時に03.jpg

イメージを80%読み込んだ時に04.jpg

イメージを100%読み込んだ時に05.jpg

等と指定する方法はないものなのでしょうか?

ご連絡お待ちしております。何卒宜しくお願い致します。

2010/02/01 23:31:09
id:sakurai_sinnya No.5

進也回答回数10ベストアンサー獲得回数12010/01/31 21:38:29

ポイント20pt

やっぱりここでしょうか?

ako's cyberpage JS一覧

id:mune0628

教えて頂いたリンクを探したのですが、どちらに書かれていますでしょうか?

該当ページまでのリンクを教えて頂きたいと思います。

宜しくお願い致します。

2010/02/01 23:39:08

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません