时间戳

首页 > 解决方案 > Next JS : 在 dom 渲染时加载屏幕

javascript - Next JS : 在 dom 渲染时加载屏幕

问题描述

如何显示我自己的加载程序而不是空白的白屏？例如，Tweeter 在页面加载时显示徽标，对于 Facebook、google AdSense 等也是如此。看看这个 Gif，我想要在 Next Js 中类似的东西。在此处输入图像描述

我想这与 _document.js 有关。react js 有一个类似的问题（在 index.html 中渲染加载器），但我不知道如何在下一个 js 中做到这一点。

标签： javascriptreactjsdomnext.jsserver-side-rendering

解决方案

通常这些是通过一个覆盖所有内容并默认显示的 div 来完成的，您在该 div 中放置的内容取决于您（gif、svg 等）。一旦 window.onload 被调用，只需隐藏 div，它将显示完全渲染的 dom。

这是一个基本示例（我在移动设备上，请原谅我的格式）CSS：

.loadingsScreen{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color: #whatever-color;
        z-index: 10;  /*just make sure it's the highest on the page*/
}

JS：

window.onload = function(){
        $("#loadingScreen").fadeOut(); //just make it hide the overlaying div, I used jQuery in this example but there are many ways to do this
};

推荐阅读