javascript - 在加载整个 html 页面之前如何显示加载 gif

Question

我有一个通过 HTML 和 CSS 非常密集的网页，这导致当用户访问该页面时某些元素的加载速度比其他元素快。加载背景可能需要一段时间，依此类推......看到它逐个元素加载会变得非常难看......

所以我想知道如何首先加载不同的页面(page1，它只有一个 gif 和最简单的 html)，然后 page2(具有密集 html 的页面)只会在客户端浏览器获取所有内容后出现页面 html。

我相信这可以用 JQuery 来完成，我对此几乎一无所知......

如有任何建议，我们将不胜感激，谢谢，

Answer 1

使用以下 HTML(最好在正文顶部):

<div id="loading"></div>

还有这个 CSS:

#loading {
    background: url('spinner.gif') no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999;
}

以及以下 JavaScript(使用 jQuery):

function hideLoader() {
    $('#loading').hide();
}

$(window).ready(hideLoader);

// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);

您可以将样式内嵌在 div 上，而不是放在样式表中，以减少在加载程序之前出现内容闪现的可能性。另外，您可以使用 https://www.askapache.com/online-tools/base64-image-converter/或类似工具将您的 GIF 转换为 base 64 URI，并使用它代替 spinner.gif。