質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

21239閲覧

Loading画面の時間を調整したい

watermusic

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2017/04/25 14:50

編集2017/04/25 23:23

http://gimmicklog.main.jp/jquery/278/

上記のページを参考に、
読み込み中にLoading画面を表示させました。
少し動きのあるLoadingなので、1秒とかで消えてしまうのではなく
例えば、下記のようなことはどのようにすれば出来るのでしょうか?

Loadingが3秒以内で完了する場合はLoadingを5秒間表示する→コンテンツ表示
Loadingが5秒以上かかる場合はLoading終了後→コンテンツ表示

やり方、アドバイス、ヒントなど頂けると幸いです。
宜しくお願いします。

lang

1$(function() { 2 var h = $(window).height(); 3 4 $('#wrap').css('display','none'); 5 $('#loader-bg ,#loader').height(h).css('display','block'); 6}); 7 8$(window).load(function () { //全ての読み込みが完了したら実行 9 $('#loader-bg').delay(900).fadeOut(800); 10 $('#loader').delay(600).fadeOut(300); 11 $('#wrap').css('display', 'block'); 12}); 13 14//10秒たったら強制的にロード画面を非表示 15$(function(){ 16 setTimeout('stopload()',10000); 17}); 18 19function stopload(){ 20 $('#wrap').css('display','block'); 21 $('#loader-bg').delay(900).fadeOut(800); 22 $('#loader').delay(600).fadeOut(300); 23}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuta0801

2017/04/25 16:02 編集

JavaScriptのコードにはHTMLタグ(<script>,</script>)を入れないでください。入れたい場合はHTMLに変えてください
guest

回答2

0

ベストアンサー

このようにするのはどうでしょうか。
読み込みが終わった時に経過時間が3秒あるか確認して、
あれば表示、なければ5秒との差分待ってから表示します

js

1var time=new Date().getTime(); 2$(function() { 3 var h = $(window).height(); 4 5 $('#wrap').css('display','none'); 6 $('#loader-bg ,#loader').height(h).css('display','block'); 7}); 8 9//全ての読み込みが完了したら実行 10$(window).on('load',function () { 11 var now = new Date().getTime(); 12 if (now-time<=3000) { 13 setTimeout('stopload()',5000-(now-time)); 14 return; 15 } else { 16 stopload(); 17 } 18}); 19 20//10秒たったら強制的にロード画面を非表示 21$(function(){ 22 setTimeout('stopload()',10000); 23}); 24 25function stopload(){ 26 $('#wrap').css('display','block'); 27 $('#loader-bg').delay(900).fadeOut(800); 28 $('#loader').delay(600).fadeOut(300); 29}

投稿2017/04/25 16:30

yuta0801

総合スコア270

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

watermusic

2017/04/25 23:27

ありがとうございました! 早速、教えて頂いた書き方を元に時間調整をしてみた所 思った通りの表示ができそうです。 大変たすかりました。 またHTMLタグ(<script>,</script>)の件、ご指摘ありがとうございました。 以後気をつけます!
guest

0

ごめんよ、気になるんだ。

Loadingが3秒以内で完了する場合はLoadingを5秒間表示する→コンテンツ表示
Loadingが5秒以上かかる場合はLoading終了後→コンテンツ表示

これ、4秒でロードが終わったらどうするの? 永遠に Loading?

仕様バグですのぅ……

投稿2017/04/25 16:35

morisoba

総合スコア90

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

watermusic

2017/04/25 23:34

ご指摘ありがとうございます。 断定的な書き方をしてしまいました。 これだと、じゃあ4秒は?になりますよね。 > Loadingが5秒未満の場合は5秒間Loading表示する→コンテンツ表示 > Loadingが5秒以上の場合はLoading終了後→コンテンツ表示 ↑このような感じで、 起点となる秒数でLoading時間を調整したかったのです。 説明が下手ですみませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問