Question

我有一个动态构建的选择下拉菜单，因此我有一个setTimeout来在3秒后更改所选选项，因此select可以先加载然后我可以更改它。但是我想要隐藏选择并显示加载的gif，并且在3秒后显示带有选项的选择我强制它显示。

这是一个显示我有多远的jsfiddle：https://jsfiddle.net/88ot9vya/1/

我正在使用setTimeout在3秒后更改它，这非常有效：

__init__.py.

如何在手前添加加载gif，运行setTimeout，然后显示它并隐藏和加载gif？这是一个例子，gif与使用的内容无关： https://media.giphy.com/media/TkXCbTx9gfUJi/giphy.gif

Answer 1

我添加了一个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);

Answer 2

我使用了与@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" />

在页面加载之前用loading.gif替换div，等待3秒，删除加载gif并显示div

2 个答案: