teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップJavaに関する質問
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

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

HTML

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

Q&A

解決済

4回答

17350閲覧

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

h-o
h-o

総合スコア134

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

jQuery

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

HTML

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

0グッド

1クリップ

投稿2017/05/23 01:10

0

1

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

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

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

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

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

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

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

guest

回答4件

0

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

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

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

投稿2017/05/23 01:19

maisumakun
maisumakun

総合スコア145183

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

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

h-o
h-o

2017/05/23 01:56

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

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
iss
iss

総合スコア506

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

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

h-o
h-o

2017/05/23 01:55

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

0

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

css
1.view_timer {
2  display: none;
3}

投稿2017/05/23 01:15

T_sa
T_sa

総合スコア353

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

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

h-o
h-o

2017/05/23 01:55

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

0

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

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

投稿2017/05/23 01:18

編集2017/05/23 01:23
m.ts10806
m.ts10806

総合スコア80850

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

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

h-o
h-o

2017/05/23 01:56

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップJavaに関する質問

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