在 Chrome 中重新加载页面时无样式内容的 Flash答案

【问题标题】：Flash of Unstyled Content when reloading page in Chrome在 Chrome 中重新加载页面时无样式内容的 Flash
【发布时间】：2017-08-24 02:21:59
【问题描述】：

首先，让我说似乎只有 Chrome 有这个特定问题。一切都在 IE 中完美运行。（Firefox 发生了一些奇怪的事情，但我现在真的只关心 Chrome。）

其次，我在 Django 中执行此操作，因此 html 中的 {% template tags %}。

我正在尝试在我的网站上制作“夜间模式”按钮。在我重新加载页面或转到网站上的另一个页面之前，一切都很好。在那些时候，我得到了一个无样式内容的 Flash，我不知道如何修复它。

我已经将我的 <script>s 移至 <head>，这样它们的加载速度会更快，尽管我知道最佳做法是在 </body> 之前将它们加载。

我看到一些帖子建议在页面完全加载之前隐藏 html，但我最终得到了一个更长的空白页面，所以我认为这不是我更喜欢的选项。

很遗憾，我并不熟悉开发工具的大部分功能。如果有人有关于如何使用它来跟踪正在发生的事情的指示，我将非常感激。

我想知道是否有人有其他想法。谢谢。

HTML：

<head> ...

    <title>{% block title %}Portfolio{% endblock %}</title>

    {% load staticfiles %}

    <link id="bootstrap-css" rel="stylesheet" type="text/css" href="https://bootswatch.com/4-alpha/flatly/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'home/css/main.css' %}">
    <script src="https://use.fontawesome.com/cfcc69be16.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <script src="{% static 'home/js/navbar.js' %}"></script>

</head>

<body>
    ...
    <button class="btn btn-info" id="change-theme">Change Theme</button>


    {% block body %}
    {% endblock %}

</body>

JS：

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}


if (storageAvailable("localStorage")) {
    var activeTheme = localStorage.getItem("theme");

    if (activeTheme == null) {
        localStorage.setItem("theme", $("#bootstrap-css").attr("href"));
        activeTheme = localStorage.getItem("theme");
    }

    $("#bootstrap-css").attr("href", activeTheme);
}
else {
    alert("Please activate local storage in your browser to use this funtion.");
}


$(document).ready(function() {

    var flatly = "https://bootswatch.com/4-alpha/flatly/bootstrap.min.css";
    var darkly = "https://bootswatch.com/4-alpha/darkly/bootstrap.min.css";

    $("#change-theme").on("click", function() {
        if (activeTheme == flatly) {
            $("#bootstrap-css").attr("href", darkly);
            localStorage.setItem("theme", darkly);
            activeTheme = localStorage.getItem("theme");
        }
        else {
            $("#bootstrap-css").attr("href", flatly);
            localStorage.setItem("theme", flatly);
            activeTheme = localStorage.getItem("theme");
        }
    });

});

【问题讨论】：

确保#bootstrap-css 元素位于此脚本之前。尝试内联脚本。

标签： javascript jquery css google-chrome

【解决方案1】：

尝试将这两个放入头部的标签中：

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/4-alpha/flatly/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/4-alpha/darkly/bootstrap.min.css">

并从 JS 中删除变量

【讨论】：