以前、「ローディング画面と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 }); }) });
回答1件
あなたの回答
tips
プレビュー