延遲顯示並隱藏包含gif圖像的div

我在使div可見並隱藏時遇到問題。以下是我設計..延遲顯示並隱藏包含gif圖像的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');並且不顯示'none'，則會在10秒或更長時間後加載。

但是，我在我的網頁上找到了這個元素。

來源

2017-02-23 Raj Tandel

不解決你的問題，但更好地顯示（）和隱藏（）更有效率 –

^https://www.w3schools.com/jquery/jquery_hide_show.asp – LordMarty

顯示gif而做什麼？點擊註冊按鈕？ – ZombieChowder

首先，您應該使用show（）和hide（），如Alvro和Marty所述。

其次，你的gif可能很大，需要時間加載。您可以通過這種方式預裝它

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

我得到這個代碼here更快加載它。它還有其他一些預加載圖像的方法，但我上面粘貼的是最簡單的imho。

你也應該壓縮你的gif來減小它的大小。有許多在線圖像壓縮器。

一切順利。

來源

2017-02-23 08:57:52

我的Gif是有28.7Kb大小。 –

嗯..猜猜這將是艱難的，沒有整個代碼 –

延遲顯示並隱藏包含gif圖像的div

回答

相關問題