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

Show loading page while main page is preparing

本文关键字：加载 显示 主页      更新时间：2023-09-26

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

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

同事们，你怎么看？

试试这个。您需要一个加载微调器元素。此外，$（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;
}
相关文章：