在页面加载前用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

回答

相关问题