Question

我有一个div 包装_ ，其中jquery的结果正在显示

<div id='ico_wait' class="ico_wait" style='display: none;' >
     <img src ="img/ico_wait.gif" /> 
</div>


<div id='wrapper_' style='display: none;'>  
</div>

在jquery中

 $(document).ready(function () {
     $('#other_stuff').click(function () {
         //show image
         jQuery('#ico_wait').fadeToggle();
         //DO STUFF
         jQuery('#ico_wait').hide();
         //ADD INFO GOTTEN IN WRAPPER
         jQuery('#wrapper_').show();
         jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");
     });
 })

如何添加

<div id='ico_wait' class="ico_wait" style='display: none;' >
     <img src ="img/ico_wait.gif" /> 
</div>

内包装_？所以它包含在div中？我的意思是，我想在执行代码而不是所有div时只显示图像，当我完成gettting结果然后隐藏图像并显示整个div？

Answer 1

如果我理解正确，您应该执行以下操作：

<div id='wrapper_' style='display: none;'>  
    <div id='ico_wait' class="ico_wait" >
        <img src ="img/ico_wait.gif" /> 
    </div>
</div>

JS：

$(document).ready(function () {
    $('#other_stuff').click(function () {
        //show image when stuff inside wrapper is being populated
        $('#wrapper_').show();
        //DO STUFF
        //ADD INFO IN WRAPPER when its ready and hide image
        $('#wrapper_ #ico_wait').fadeToggle();
        $('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");
    });
});

Answer 2

我认为最好的办法是：

CSS

.hide {
    display: none;
}

HTML

<div id='wrapper_'> 
    <div id='ico_wait' class="ico_wait" class="hide" >
        <img src ="img/ico_wait.gif" /> 
    </div>
</div>

的jQuery

$(document).ready(function() {
    $('#other_stuff').click(function(){
             //show image
             jQuery('#ico_wait').removeClass('hide'); // Use of CSS Styles to do any animation for fading
             //DO STUFF
             jQuery('#ico_wait').addClass('hide');     
             //ADD INFO GOTTEN IN WRAPPER
             jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");


        });
});

我更喜欢让CSS引擎对HTML进行任何样式更新和更改，这应该在另一个线程上运行，而不是相同的JavaScript执行线程，以便动画可以在JavaScript运行时解决任何问题。

您也可以通过内容交换以及jQuery来完成此操作，但不确定建议的效果如何。

的jQuery

$(document).ready(function() {
    $('#other_stuff').click(function(){
             //show image
             jQuery('#wrapper_').html("<img src='img/ico_wait.gif' />");
             //DO STUFF
             jQuery('#wrapper_').html("<b><p style='color:#5b5b5b; float:left; margin-top:0px; padding-top:20px;'>  </p> </b><br/> <br/> ");


        });
});

如果您在长时间运行的代码中遇到异步问题，可以使用以下内容：jQuery Async来帮助http://mess.genezys.net/jquery/jquery.async.php

希望这有帮助。

仅在显示内部显示预加载图像：none div而不是div

2 个答案: