javascript - 在主页准备时显示加载页面

Question

我想在主页准备然后加载时显示预加载图像。我想我不能使用 Ajax，因为我需要重新加载整个主页。我接下来要实现：首先，我请求预加载页面，然后服务器将其发送给我。其次，服务器开始形成主页（大约需要15-20秒）。第三，当服务器结束他的工作时，它会向我发送主页。但是我怎样才能实现第三部分呢？

第二个想法是将主页分成两部分。其中之一是预加载页面，其中包含整个主页的内容而没有'busy time'内容。然后使用 Ajax 加载'busy time'内容。

各位同事，你们怎么看？

Answer 1

尝试这个。您需要一个加载微调器元素。此外， $(function(){}); 在加载 DOM（html 结构）时激活。当访问者第一次到达页面时，这是您最接近的地方。body 元素被隐藏，然后等到所有图像和所有内容都完全渲染并且 CSS 和 Javascript 文件加载并工作，然后它从微调器交叉淡入淡出到内容并移除微调器。

$(function(){
    $('body').hide();
    $('html').append('<div id="loading-spinner"></div>');
    $('body').load(function(){
        $('#loading-spinner').fadeOut('fast').remove();
        $(this).fadeIn('fast');
    });
});

您需要一些 CSS 来将 GIF 应用于加载微调器元素的背景并将其居中：

#loading-spinner {
    width:100px;
    height:100px;
    background:url(loading.gif);
    left:50%;
    margin-left:-50px;
    top:50%;
    margin-top:-50px;
}