用于动态内容的预加载器

Question

我有动态页面需要大约8秒加载搜索的数据。

问题是，所有浏览器仅仅是

完全加载后仍保持旧的网页对那些8秒& 显示动态页。

我想要的是preloder图像要显示给客户，直到第二页得到加载。

我该如何做到这一点？

谢谢

Answer 1

我假设你通过AJAX加载第二页。如果是这样，您将只能在异步调用返回后显示结果。

但是，在发送AJAX请求之前，没有什么能够阻止您更改页面。其基本结构为：

var preload = $('<div></div>').text('I am preloading!').insertAfter('somewhere'); 
$.get(..., function() { 
    preload.remove(); 
    // insert your real content, received from this AJAX request 
}); 

Answer 2

$('<div id="busy">Loading...</div>') 
     .ajaxStart(function() {$(this).show();}) 
     .ajaxStop(function() {$(this).hide();}) 
     .appendTo('body'); 

这一切！

您可能需要为#busy标记添加一些样式，但是您可以使用CSS进行此操作。