动态内容的预加载器

Question

我有动态页面，需要 8秒才能加载搜索到的数据。

问题是，所有浏览器都保留在旧页面上，这些8秒＆amp; 仅在

之后显示动态网页

完全加载。

我希望在第二页加载之前向客户展示 preloder image 。

我怎样才能做到这一点？

由于

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。