消除JavaScript“；屏幕闪烁“；当将JS应用于"；Purecss.io“；CSS菜单？

我是否可以通过延迟这些菜单的显示来消除“屏幕闪烁”，直到JavaScript加载并应用到菜单元素之后

我使用的下拉菜单来自：

“向菜单添加下拉列表需要使用JavaScript并使用其方法。”

无标题文件







来自雅虎的更多信息















尤伊({
classNamePrefix:'纯'
}).使用（'gallery-sm-menu'，功能（Y）{
变量水平菜单=新Y.菜单({
容器：“#演示水平菜单”，
sourceNode:“#标准菜单项”，
方向：“水平”，
hideOnOutsideClick:false，
hideOnClick:false
});
水平菜单。渲染（）；
horizontalMenu.show（）；
});

在等待javascript应用某种格式或创建某些内容时，避免屏幕闪烁的一个经典解决方法是设置CSS规则或内联样式，使闪烁的内容最初不可见

根据具体情况，您可以使用

可见性：隐藏

或

显示：无

。如果您的内容大小已经正确，但只需要一些样式，那么您可能需要使用

可见性：hidden

，因为这将允许所有内容正确布局（因此，当您使其可见时，任何内容都不会跳转或移动）。如果您的内容大小还不合适，那么您可能希望使用

display:none

来避免一次布局，然后在通过JS应用最终样式时更改大小，然后再次布局

---

在您的代码中，如果您只是将其添加到CSS中：

#demo-horizontal-menu {
    visbility: hidden;
}

或者，您也可以在HTML中应用内联样式：

<div id="demo-horizontal-menu" style="visbility: hidden;">

然后，加载时将不会出现菜单闪烁。

.show（）

方法似乎已经负责在菜单完全初始化后使其对您可见

使用您的代码进行演示：

<div id="demo-horizontal-menu" style="visbility: hidden;">