gif画像を含む表示と非表示divの遅延

Question

divを表示して非表示にすることに問題があります。 私のデザイン..です

<div class="sidebar_contents_container inactive_step" id="step-trip-mode"> 
<div id="Progressbar" style="position:fixed;width:100%;height:100%;z-index:999;background: rgba(0,0,0,0);display:none;"> 
    <div style="background-image:url('../images/progress_bar.gif');width:8%;height:17%;top:50%;left:50%;position:fixed;"></div> 
</div> 
<div class="settings_container"> 
    <div class="header">Register Your Device Id</div> 
    <div class="intro-content"> 
     <div class="intro-content-middle"> 
      <span class="title" style="text-align: center;padding-right: 155px ">Device Id <font color="red">*</font>:</span> 
      <div style="margin: 2px;"> 
       <!--<font size="4">Device Id : </font><font size="3" color="red">*</font></br>--> 
       <input id="device_Id" type='text' class="txtbox" placeholder="Device Id"style="width:250px;height: 40px;"/disabled> 
       <div style="color:red;visibility: hidden;">Device</div> 
      </div> 
      <span class="title" style="text-align: center;padding-right:140px;">Device Sim<font color="red">*</font>: </span> 
      <div style="margin: 2px;"> 
       <input id="device_sim_number" type='text' class="txtbox" placeholder="Device Sim"style="width:250px;height: 40px;" maxlength="15"/> 
       <div style="color:red; visibility: hidden;" id="device_sim_number1">Field can not be Blank.</div> 
      </div> 
      <span class="title" style="text-align: center;padding-right:140px;">First Name <font color="red">*</font>: </span> 
      <div style="margin: 2px;"> 
       <input id="txtFName" type='text' class="txtbox" placeholder="First Name" style="width:250px;height: 40px;" maxlength="100"/> 
       <div style="color:red;visibility: hidden;" id="txtFName1">Field can not be Blank.</div> 
      </div> 
      <div style="/* margin: 30px; */position: absolute;width: 98%;bottom: 35px;"> 

      </div> 
     </div> 
    </div> 
    <div style="/* margin: 30px; */position: absolute;width: 98%;bottom: 35px;"> 
     <button id="SaveDeviceData" type="submit" class="btn-active" onclick="Checkvalidation2()" >Register</button> 
    </div>  
</div> 

後、私は、全体のコードを言及していないです、デザインの視点でこれらのみご検討ください。

ここで重要なのは、div内に自分のGIFが含まれているdivを作成し、jqueryを使用して表示および非表示にしたいとします。

jqueryを使用して可視性を制御する方法は？

function Checkvalidation2(){ 
    $("#Progressbar").css('display','block'); 
    save(); 
} 

function save(){ 
    testing(); 
} 

function testing(){ 
    $("#Progressbar").css('display','none'); 
} 

上記のコードを使用することによって、これまで私が直面してきたことは、表示されないgifです。と私はちょうど$("#Progressbar").css('display','block');を使用して、それが表示されないように 'なし'それは10秒以上後に読み込まれます。

しかし、私はその要素を自分のウェブページに載せています。

Answer 1

まず、AlvroとMartyの言葉通りshow（）とhide（）を使うべきです。

第2に、gifが大きくて読み込みに時間がかかることがあります。あなたは、私がhereからこのコードを持って、このように

<div class="hidden"> 
<script type="text/javascript"> 
    <!--//--><![CDATA[//><!-- 

     if (document.images) { 
      img1 = new Image(); 
      img2 = new Image(); 
      img3 = new Image(); 

      img1.src = "http://domain.tld/path/to/image-001.gif"; 
      img2.src = "http://domain.tld/path/to/image-002.gif"; 
      img3.src = "http://domain.tld/path/to/image-003.gif"; 
     } 

    //--><!]]> 
</script> 

それをプリロードすることにより、より速くそれを読み込むことができます。それはまた画像をプリロードするいくつかの他の方法がありますが、私が上に貼り付けたのは最も簡単です。

gifを圧縮してサイズを小さくする必要があります。多くのオンライン画像圧縮装置があります。

すべて最高です。