jstree文件准备延迟

Question

我有一个基于jQuery的网站的问题。我的网站使用jsTree在我的网站上显示一个TreeView。我以这样的方式加载jsTree：

$(function () {
    $('#jstree').jstree({
        "plugins":
        [
            "json_data", "ui", "hotkeys", "sort", "search", "state", "wholerow"
        ]
    });
});

现在的问题是，我的网站呈现有点延迟。有一秒钟，用户可以看到没有jsTree样式和功能的所有html元素。

已加载的网站：

​

一秒钟后：

​

​

也许有人有任何想法，那就太好了！谢谢!

Answer 1

你无意中发现了一个FOUC。非样式内容(FOUC)的闪存是一个实例，在加载外部CSS样式表之前，网页会以浏览器的默认样式短暂出现，这是因为web浏览器引擎在检索所有信息之前呈现该页面。一旦加载并应用了样式规则，页面就会自我校正；但是，这种变化是显而易见的，而且会分散注意力。

修复方法有很多种，最流行的方法可能是隐藏显示内容的div或元素，直到内容准备就绪。

我猜#jstree是一个div，如果是这样的话，您可以这样做：

<div id="jstree" style="display:none;">

那么，当dom准备好时，您可以解开它：

$( document ).ready(function() {
    $('#jstree').show();
});