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

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

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

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

jQuery

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

CSS

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

Q&A

解決済

1回答

3318閲覧

ローディング画面を時間で制限

mablue222

総合スコア14

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2018/03/14 04:02

編集2018/03/15 08:14

以前、「ローディング画面とbxsliderの共存JavaScript」にてご質問ました。
https://teratail.com/questions/104752

今回さらに最初に表示されるローディング画面だけ時間で制限をかけたいのですが、
どうしてもbxsliderにも影響が出てしまいます。

実現したいことは
「ローディング画面は1時間以内にアクセスした場合は表示しない」
というものです。

例えばトップページにローディング画面を入れた場合、
再びトップページに戻った際も1時間以内であれば表示されない。
という感じです。
クッキーを利用して、
色々試行錯誤したのですがお力をお貸しいただければと思います。

lang

1date = new Date(); 2date.setTime( date.getTime() + ( 1 * 60 * 60 * 1000 )); 3$.cookie( "load", "1 hours", { expires: date }); 4 5var time = new Date().getTime(); 6jQuery(function() { 7 var h = $(window).height(); 8 9 $('#wrapper').css('display', 'none'); 10 $('#loader-bg ,#loader').height(h).css('display', 'block'); 11}); 12 13 14$(window).on('load', function() { 15 var now = new Date().getTime(); 16 if (now - time <= 3000) { 17 setTimeout('stopload()', 6500 - (now - time)); 18 return; 19 } else { 20 stopload(); 21 } 22}); 23 24 25jQuery(function() { 26 setTimeout('stopload()', 10000); 27}); 28 29var slider = null; // 追加 30function stopload() { 31 $('#wrapper').css('display', 'block'); 32 $('#loader-bg').delay(900).fadeOut(800); 33 $('#loader').delay(600).fadeOut(300); 34 35 // ここから追加 36 // stoploadが複数回呼ばれる可能性がある模様なので、 37 // bxsliderが何回も起動されないよう条件分岐を入れています。 38 if (slider === null) { 39 slider = $('.bxslider').bxSlider({ 40 auto: true, 41 controls: false, 42 autoHover: true, 43 pause: 5000 44 }); 45 } 46 // ここまで追加 47} 48

追記:
上記の「setTimeout」の部分を下記のようにしてみたのですが、動作は思い通り
なのですが、合っていますでしょうか?

// cookie追加 jQuery(function() { if($.cookie("access")){ $('#loader-bg ,#loader').css('display', 'none'); setTimeout('stopload()', 0); }else{ setTimeout('stopload()', 10000); } $(window).load(function(){ var date = new Date(); date.setTime( date.getTime() + ( 60 * 60 * 1000 )); $.cookie( "access", "60 minutes", { expires: date }); }) });

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

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

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

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

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

kei344

2018/03/14 04:26

「1時間以内にアクセス」とは、ページを閉じてからもう一度アクセスすると言うことでしょうか。そのためのコードがどの部分かも質問文に追記してください。
guest

回答1

0

ベストアンサー

$.cookie( "load", "1 hours", { expires: date }); で再設定する前に値を取得して、その値があった場合ローディングを表示しないようにすれば良いです。

【jquery.cookie.jsの使い方とCOOKIEの寿命(保存期間)を秒・分・時間で指定する方法 - Qiita】
https://qiita.com/hiroshido/items/06e88a53f101ae8d2700

投稿2018/03/15 02:22

kei344

総合スコア69407

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問