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

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

ただいまの
回答率

87.37%

非表示にしているものが一瞬見えてしまいます。

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 10K+

score 134

問題の詳細

以下のリンク先のページで、指定した期間で画像を表示する終わったら非表示にする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より先に読み込むようにしてみましたが解決できませんでした。


不明点等ございましたら追記いたします。
お手数ですがよろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+4

jQuery(function(){})の関数の中身は、DOMが構築された段階で実行されます。なので、HTMLの読み込みのほうが、どうしても先に進んでしまいます。

一瞬見えるのがまずい、と言うことでしたら、.view_timerdisplay:noneをかけておいて、JavaScriptで非表示→表示の切り替えを行う、という形にする方法もあります。

なお、動的に変わる値ではなさそうですので、PHPなどサーバサイドでスクリプトを組める環境でしたら、そちらで片付けたほうが適切かと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/23 10:56

    回答をいただき誠にありがとうございます。

    キャンセル

checkベストアンサー

+2

JS判定後でなければ.view_timerの表示非表示が決定しない仕様であれば、

CSSのスタイル初期値をdisplay:none;にしてはどうでしょうか。
JSで先読みする方法もあるかとおもいますが、このほうが間違い無いかと思います。

※jQueryのhide()show()は、display:nonedisplay:blockを切り替える指定です。

.view_timer {display:none;}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/23 10:55

    回答をいただき誠にありがとうございます。
    詳しい説明も書いていただきありがとうございます。

    キャンセル

+1

jsを読み込んでから適応するまでのちょっとした間に見えてしまっているのだと思います。
cssなどで初めから非表示にしておくのではダメでしょうか?

.view_timer {
  display: none;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/23 10:55

    回答をいただき誠にありがとうございます。

    キャンセル

0

「jQuery(function($)」はHTMLの読み込みが終わった時点で実行されます。
バナー差し替えjsの読み込みタイミングは関係ありません。

期間外のものはそもそもHTMLに書き出さないようにしたらいいのではないでしょうか。
※タグにJavaがついているのでサーバーサイドはJavaで組んでいるという前提ですが、Java側の対応となります

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/23 10:56

    回答をいただき誠にありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

閲覧数の多いJavaの質問