使用get（）加载页面之前的图像加载

Question

如何在加载期间显示gif图像？

我用get。

function getCurrentUrl() { 
    $(
     $.get(
      "page1.html", 
      function (data) { 
       $("#divReceptLoad").empty().append(data); 
      }, 
      'html' 
     ) 
    ); 
} 

比你非常多，如果你能帮助我:)

Answer 1

创建<img id="loading" src="..." style="display:none;" />则：

function getCurrentUrl() { 
    $('#loading').show(); //show it before sending the ajax request 
    $.get("page1.html", function (data) { 
     $('#loading').hide(); //hide in the callback 
     $("#divReceptLoad").empty().append(data); 
    },'html')); 
} 

随意更多的样式/定位添加到图像和更换基本show/hide方法fadeIn/fadeOut,slideDown/slideUp或other effects如果你喜欢。

这里有一个loading GIF generator和another以防你不想从Google图片中获取一个。

这里是预制的nice collection。

Answer 2

function getCurrentUrl() { 
    $('#gif').fadeIn() // show the hidden gif 
    $.get("page1.html", function(data){ 
     $('#gif').hide() // hide it 
     $("#divReceptLoad").empty().append(data); 
    },'html')  
}