时间戳

首页 > 解决方案 > 如何在发布/加载网页之前全局应用 Bootstrap 样式类

javascript - 如何在发布/加载网页之前全局应用 Bootstrap 样式类

问题描述

我想将 Bootstrap 类全局应用到我的网站，并且当 Bootstrap 类通过 jQuery 应用时，所有网站元素都不会跳来跳去。

例如，我想让每个h1元素都有 Bootstrap 类text-center和border-bottom. 为此，我可以使用 jQuery 的.addClass()方法将适当的 Bootstrap 类应用于所有匹配的元素。问题在于，每次用户访问网站上的不同页面时，未设置样式的元素首先加载，然后随着 Bootstrap 类的应用而跳来跳去。我假设发生这种情况是因为我的 jQuery 脚本仅在页面加载完成后运行。

为了避免这种情况，我可以直接将 Bootstrap 类放在h1元素中，如下所示<h1 class="text-center border-bottom">...</h1>：显然这不是一个好的解决方案，因为我不想将类“硬编码”到h1站点上的每个元素上。

有没有办法在加载/发布网站之前应用 Bootstrap 类，这样网页元素的“跳跃”就不会发生？

我目前正在使用 XAMPP 在本地托管网站，并且我正在使用 PHP 在所有页面中包含相同的页眉和页脚。页眉和页脚包含必要的引导样式和脚本资源。

标签： javascriptphpjqueryhtmltwitter-bootstrap

解决方案

我喜欢做的是将我的 HTML 包装在一个 div 中，我们称之为 wrap。在页面的头部：

<style>.wrap{display:none;}</style>

然后在我的“CSS”文件中有

.wrap{display:block;}

然后在页脚defer中加载我的 CSS：

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="compressed.css" />
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>

这将“隐藏”页面的内容，直到 CSS 完全加载。我还将我的所有 CSS 压缩到一个文件中，这很容易，因为我开发了一个自定义 CMS 并且不使用 wordpress，但这是一个不同的对话。

推荐阅读