1

这很好用，除了我希望loading-indicator在我从下拉列表中选择一个新值时显示 div。第一次运行时，加载指示器出现，然后在加载远程内容后消失。我将下拉菜单更改为不同的值，但加载指示器不会重新出现。一旦完成加载，“新”内容最终会显示出来。

<select name="branch_name" id="branch_name">
    <option value="Branch1">Branch1</option>
    <option value="Branch2">Branch2</option>
    <option value="Branch3">Branch3</option>
</select>

<div id="mycontent">
    <div id="loading-indicator" style="display:none">
    Scanning subversion<img src="/images/ajax-loader.gif" /></div>
</div>

<script type="text/javascript">
    $(function(){
        $('#branch_name').bind("change", function() {
            $('#loading-indicator').show();
            $('#mycontent').load('/tags/runme',{branch_name: $(this).val()});
        });
    });
</script>
4

4 回答 4

2

.load() 替换元素的 HTML，因此将加载指示器移到 之外#mycontent，并手动隐藏它。

<div id="loading-indicator" style="display:none">
    Scanning subversion<img src="/images/ajax-loader.gif" />
</div>
<div id="mycontent"></div>

<script type="text/javascript">
    $(function(){
        var $spinner = $('#loading-indicator');
        $('#branch_name').bind("change", function() {
            $spinner.show();
            $('#mycontent').load('/tags/runme',{branch_name: $(this).val()}, function () {
                $spinner.hide();
            });
        });
    });
</script>
于 2013-06-12T01:53:05.073 回答
1

您可以像这样使用回调：

$('#mycontent').load('/tags/runme',{branch_name: $(this).val()}, function(data) {
   //Do your stuff here, this will be executed once the request is over.
   $('#loading-indicator').hide()
});

参考：http ://api.jquery.com/load/

于 2013-06-12T01:52:45.043 回答
1

加载指示器位于您正在加载内容的 div 内。您加载的内容会替换该 div 中的所有内容，包括指示器。

要修复，请将指示器移到 div 之外：

<div id="loading-indicator" style="display:none">
<div id="mycontent">
    Scanning subversion<img src="/images/ajax-loader.gif" /></div>
</div>

或.prepend()加载内容后。

$("#mycontent").prepend('<div id="loading-indicator">');
于 2013-06-12T01:53:01.867 回答
0

您可以使用.not()来排除您的加载指示器。

$("#mycontent > div").not('#loading-indicator').hide();

演示

于 2013-06-12T02:14:21.810 回答