時折、ページを更新する際にjQueryによる隠しコンテンツが数秒間表示されます

Question

jQueryダイアログを作成して隠し画像を保存しました。このダイアログはリンクをクリックすることによってのみ表示されます。以下のようにコードのいくつかは以下のとおりです。

<div id="dialogdialog" style="background-color: white;"> 
      <div> 
       <div style="clear: right"> 
       <a href="#" class="closeDialogButton"> 
        <div id="fitClose" class='sprite x' style="float:right;"></div></a> 
       </div> 
      </div> 
      <div> 
       <div id="fitLogoBlack" class='sprite black-logo'></div> 
       <br/><br/> 
       <img id="fitTitle" src="img/fitguide_title.jpg"> 
       <img id="fitLogoBlue" src="img/blue.png"> 
      </div> 
      <div> 
       <img src="img/topbanner01.jpg"> 
       <br/> 
       <img src="img/slim02.jpg"> 
      </div> 


     </div> 



<a class="fit-guide" href="#fit-guide" target="_self" rel="nofollow" id="fitguidePic">Fit Guide</a> 

<script> 
    $(function() { 
     $("#dialogdialog").dialog({ 
      width: 900, 
      border: 0, 
      autoOpen: false, 
      modal: true, 
      resizeable: false, 
      dialogClass:"myClass" 

     }); 
     $("#fitguidePic").on("click", function() { 
      $("#dialogdialog").dialog("open"); 
     }); 
    }); 

    $('.closeDialogButton').click(function(e){ 
     e.preventDefault(); 
     $('#dialogdialog').dialog('close'); 
    }) 
    </script> 

とコード、私は私のページを更新するとき、私は隠された内容は上の登場が表示されますが、時折、私はリンクをクリックするまで、画像を非表示にすることができ、作業していますページは数秒間表示されますが、ページ全体が完全に読み込まれた後、再び非表示になります。しかし、この状況はリフレッシュごとに起こるわけではありません。

この問題の原因はわかりません。リフレッシュ時にイメージがポップアップするのを止めるにはどうすればいいですか？ありがとう！

Answer 1

は、あなたのCSSにこれを追加します。

#dialogdialog { 
    display: none; 
} 

Javascriptが完全にそれがデフォルトで表示されているので、ダイアログは、時々見えるロードするためにブラウザでページの表示が待機していませんので。 jQueryはCSSに直接要素を追加することで、後でこの初期設定を上書きします。

Answer 2

display: none; on #dialogdialog 

Answer 3

にはどうすればさわやかなときにポップアップ画像を停止することができますか？

バニラjs（raw js）を使用します。どうして ？

この問題の原因はわかりません。

jQuery（正しく設定されている場合）は、ドキュメント全体が読み込まれた後にのみ読み込まれるためです。だからあなたが最初に表示されるイメージをリフレッシュすると、それを隠すコードがそれ以降に読み込まれます。遅延があり、読み込みが遅いときはいつでも、jQueryを使用している場合は、表示されなくなります。

Altソリューション：ドキュメントが完全に読み込まれるのを待たずにjQueryをロードできますが、コードが壊れている可能性があります。これは一般的には本当に悪い考えです。 jQueryはドキュメント全体でのみ動作します。