[jQuery] JSON Jquery Load Animated GIF

[jQuery] JSON Jquery Load Animated GIF


Hello
I have an animated GIF load, till the DOM is loaded
<!-- Page Uploading Progress bar Script -->
<div id="loading" style="position:absolute; width:100%; text-
align:center; top:300px;">
Loading Tax Software ... Please wait...

<img src="imgs/progress_bar.gif" border=0></div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
    ld=document.loading;
else if (ns6)
    ld=document.getElementById("loading").style;
else if (ie4)
    ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
But i want the animated gif to continue till the JSON data is loaded.
$(document).ready(function(){
jQuery.getJSON("scripts/data/country_data.js",function(jsonData) {
$.each(jsonData,function(key,object) {
$
("#foreign_country_info").addOption(object.Country_Code,object.Country);
$("#foreign_country_info option[@value='select']").attr('selected',
'true');
});
Can someone help me with this?
How do I continue to display the animated gif, till the json completes
loading?
Thanks