Afficher uniquement préchargement de l'image dans un display: none div mais pas div

Question

J'ai un div wrapper_ où les résultats de jquery affichent

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


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

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

Comment ajouter

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

inside wrapper_? donc il est contenu dans le div? Je veux dire, je veux montrer seulement l'image lors de l'exécution du code pas tout div, quand je finis de gettting résultats puis masquer l'image et montrer div entier?

Answer 1

Si je comprends bien, vous devez effectuer les tâches suivantes:

<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

Je pense que la meilleure façon que je voudrais aller à ce sujet:

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


     }); 
}); 

Je préfère laisser le moteur CSS faire des mises à jour de style et des modifications au code HTML cela devrait fonctionner sur un autre thread, pas le même thread exécutant JavaScript afin que les animations peuvent aller sans problèmes, pendant que votre JavaScript s'exécute.

Vous pouvez également le faire avec un échange de contenu avec jQuery, mais vous ne savez pas si cela sera recommandé.

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


     }); 
}); 

Si vous rencontrez des problèmes avec votre async code long de la course, vous pouvez utiliser quelque chose comme: jQuery Async pour aider à http://mess.genezys.net/jquery/jquery.async.php

Hope this helps.