Question

我正在尝试根据视口的宽度应用一个类名，这样它就不会闪现＆＃34;闪烁＆＃34;在加载和处理JavaScript之前。

例如，如果用户在移动设备上，我有一个默认隐藏的Bootstrap侧边栏。如果我只是为document.ready事件添加一些逻辑，那么菜单会在消失前一瞬间显示，这很烦人。

为了规避这种行为，我使用document.write为我的侧边栏创建了开放标记：

<script type="text/javascript">
  // Prevent flicker of menu before collapsing on small screens
  if (window.outerWidth < 768) {
    document.write('<aside class="collapse" id="primary-sidebar">');
  } else {
    document.write('<aside class="collapse in width" id="primary-sidebar">');
  }
</script>
...
</aside>

虽然这解决了这个问题，但我确实在Firefox中收到有关不平衡树的警告，并且我已经知道document.write不应该以这种方式真正使用。

是否有其他方法可以根据窗口大小添加in width类，而无需等到页面全部加载后？

Answer 1

您可以使用：

var aside = document.querySelector("#primary-sidebar");
if (window.outerWidth < 768) {
    aside.className = "collapse";
} else {
    aside.className = "collapse in width";
}

Answer 2

不要将Javascript放在document.ready中，而是将<script>标记放在相关元素后面。

<aside class="collapse" id="primary-sidebar">
...
</aside>
<script type="text/javascript">
if (window.outerwidth >= 768) {
    document.getElementById("primary-sidebar").className = "collapse in width";
}
</script>

虽然这会短暂地显示错误的大小，但它应该调整得如此之快以至于闪烁应该是不明显的。我把这个逻辑放在桌面版本中，因为处理速度应该更快。

Answer 3

通过使用JavaScript来处理基于屏幕大小隐藏/显示的内容，你会给自己带来很大的压力。

根据屏幕尺寸隐藏/显示内容的标准方法是使用@media CSS rule

例如：

@media (min-width: 768px) {
    #primary-sidebar {
        display:none;
    }
}

Answer 4

如果您想阻止最初显示菜单，请将元素设置为

display: none;

或

visibility: hidden;

另一方面，你不需要把它放在$（document）.ready（）;如果你唯一的条件是窗口的宽度。

避免document.write

4 个答案: