show only preloading image inside a display:none div but not div

Question

I have a div wrapper_ where results of jquery are displaying

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


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

in 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/> ");
     });
 })

How to add

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

inside wrapper_? so it is contained in the div? I mean, I want to show only the image when executing code not all div, when I finish gettting results then hide image and show whole div?

Answer 1

IF I understand you correctly, you should do the following:

<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

I think the best way I would go about this:

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/> ");


        });
});

I prefer to let the CSS engine do any style updates and changes to the HTML this should run on another thread, not the same JavaScript executing thread so that the animations can go with out any issues, while your JavaScript runs.

You can also do this with content swapping as well with just jQuery, but not sure how well that would be recommended.

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/> ");


        });
});

If you are having async issues with your long running code you could use something like: jQuery Async to help at http://mess.genezys.net/jquery/jquery.async.php

Hope this helps.