Q&A
回答をいただき誠にありがとうございます。
詳しい説明も書いていただきありがとうございます。
###問題の詳細
以下のリンク先のページで、指定した期間で画像を表示する終わったら非表示にするjs（以後,バナー差し替えjs）を利用しているのですが、指定期間外の非表示中にもページの読み込みの初めに一瞬見えてしまいます。（メインビジュアルの緑の画像のもの）
問題のページ http://wonect.com/lab/
###関係するコード
以下のコードを<head>の一番最後に読み込んでいます。
<!-- バナー差し替えjs --> <script> jQuery(function($){ $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); }); </script> <!-- / バナー差し替えjs / -->
一瞬見えてしまう箇所HTML内のコード
・class=〜 の箇所で期間を指定
<li class="view_timer" data-start-date="2017/5/17 15:00" data-end-date="2017/5/17 15:10"> <picture> <source media="(max-width:780px)" srcset="https://wonect.com/media/wysiwyg/top/Main/SP/EN/x2reviews_sp_en.jpg"> <img src="https://wonect.com/media/wysiwyg/top/Main/PC/EN/x2reviews_pc_en.jpg" alt="x2 reviews" /> </picture> </li>
###やってみたこと
バナー差し替えjsをHTMLより先に読み込むようにしてみましたが解決できませんでした。
不明点等ございましたら追記いたします。
お手数ですがよろしくお願いいたします。
回答4件
0
jQuery(function(){})の関数の中身は、DOMが構築された段階で実行されます。なので、HTMLの読み込みのほうが、どうしても先に進んでしまいます。
一瞬見えるのがまずい、と言うことでしたら、.view_timerにdisplay:noneをかけておいて、JavaScriptで非表示→表示の切り替えを行う、という形にする方法もあります。
なお、動的に変わる値ではなさそうですので、PHPなどサーバサイドでスクリプトを組める環境でしたら、そちらで片付けたほうが適切かと思います。
投稿2017/05/23 01:19
総合スコア145975
0
ベストアンサー
JS判定後でなければ.view_timerの表示非表示が決定しない仕様であれば、
CSSのスタイル初期値をdisplay:none;にしてはどうでしょうか。
JSで先読みする方法もあるかとおもいますが、このほうが間違い無いかと思います。
※jQueryのhide()とshow()は、display:noneとdisplay:blockを切り替える指定です。
CSS
1.view_timer {display:none;}
投稿2017/05/23 01:14
編集2017/05/23 01:17
総合スコア506
0
「jQuery(function($)」はHTMLの読み込みが終わった時点で実行されます。
バナー差し替えjsの読み込みタイミングは関係ありません。
期間外のものはそもそもHTMLに書き出さないようにしたらいいのではないでしょうか。
※タグにJavaがついているのでサーバーサイドはJavaで組んでいるという前提ですが、Java側の対応となります
投稿2017/05/23 01:18
編集2017/05/23 01:23
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/23 01:56