人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

画像が読み込まれる間に「now loading...」と表示されますが、
javascript や ajax 等を使用し、且つ、読込み状態を"%"でを表示し、
アニメーション画像を作るやり方はありませんか?

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


宜しくお願い致します。


●質問者: mune0628
●カテゴリ:ウェブ制作
✍キーワード:Ajax FLASH JavaScript アニメーション 画像
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● km1967
●20ポイント

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


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

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

◎質問者からの返答

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

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

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


2 ● haya
●20ポイント

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

すいません

◎質問者からの返答

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

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


3 ● orz66
●20ポイント

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

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

◎質問者からの返答

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

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

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

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


4 ● ofk
●20ポイント ベストアンサー

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に移植してのユーザスクリプト専用コードと言えます。参考になれば幸いです。

◎質問者からの返答

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

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

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

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

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

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

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

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

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

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


5 ● 進也
●20ポイント

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

ako's cyberpage JS一覧

◎質問者からの返答

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

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

宜しくお願い致します。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ