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;
}

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

1 个答案: