在頁面加載前用load.gif替換div，等待3秒，刪除加載gif並顯示div

我有一個動態構建的選擇下拉菜單，所以我有一個setTimeout在3秒後更改選定選項，所以選擇可以先載入然後我可以改變它。但我想隱藏選擇並顯示一個加載gif，並在3秒後顯示選擇，我強制顯示選項。在頁面加載前用load.gif替換div，等待3秒，刪除加載gif並顯示div

這裏是展示多遠我有一個的jsfiddle：https://jsfiddle.net/88ot9vya/1/

我使用的setTimeout3秒這完美的作品後對其進行更改：

setTimeout(function() { 
    $('#txtShipAddress>option:eq(0)').prop('selected', true); 
}, 3000);

如何手前添加加載GIF ，運行setTimeout，然後顯示它並隱藏和加載gif？這裏有一個例子gif無所謂使用什麼： https://media.giphy.com/media/TkXCbTx9gfUJi/giphy.gif

來源

2017-04-25 xohbrittx

爲什麼不只是使用文檔就緒事件？ – happymacarts

我添加了一個img標籤並隱藏選擇最初。

https://jsfiddle.net/88ot9vya/2/

GIF不是在撥弄加載，但它加載圖像，然後選擇。

<select name="txtShipAddress" id="txtShipAddress" style="display:none;"> 
 
    <option value="-2">Please Choose One</option> 
 
    <option value="115599">#1</option>  
 
    <option value="141044">#2</option>  
 
    <option value="143936">#3</option>  
 
    <option value="143414">#4</option>  
 
    <option value="-1" selected>Free Form Address</option> 
 
</select> 
 
<img id="giffy-poo" src="https://giphy.com/gifs/loading-TkXCbTx9gfUJi?utm_source=media-link&utm_medium=landing&utm_campaign=Media%20Links&utm_term=https://www.google.com/" />

setTimeout(function() { 
    $('#txtShipAddress>option:eq(0)').prop('selected', true); 
    $('#giffy-poo').hide() 
    $('select').show() 
}, 3000);

來源

2017-04-25 20:11:10 Kosch

完美地工作，謝謝！ – xohbrittx

我用了一個非常相似的結構@Kosch

我的答案是使用document ready event handler，以確保選擇是那裏第一次它試圖之前調出腳本

$(document).ready(function(){ 
 
$('#txtShipAddress').hide(); 
 
    setTimeout(function() { 
 
     $('#txtShipAddress>option:eq(0)').prop('selected', true); 
 
     $('#txtShipAddress').show(); 
 
     $('#loader').hide(); 
 
    }, 3000); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="txtShipAddress" id="txtShipAddress" > 
 
    <option value="-2">Please Choose One</option> 
 
    <option value="115599">#1</option>  
 
    <option value="141044">#2</option>  
 
    <option value="143936">#3</option>  
 
    <option value="143414">#4</option>  
 
    <option value="-1" selected>Free Form Address</option> 
 
</select> 
 
<img id="loader" src="https://media.giphy.com/media/nZQIwSpCXFweQ/giphy.gif" />

來源

2017-04-25 20:27:28 happymacarts

在頁面加載前用load.gif替換div，等待3秒，刪除加載gif並顯示div

回答

相關問題