Question

首先，我要说只有Chrome才有这个特定问题。 IE中的一切都完美无瑕。（Firefox有一些奇怪的东西，但我现在真的只关心Chrome。）

其次，我在Django中这样做，因此html中的{% template tags %}。

我正在努力制作一个夜晚模式＆＃34;我网站上的按钮。在重新加载页面或访问网站上的其他页面之前，这一切都很有效。在那些时候，我得到了一个Flash of Unstyled Content，我不知道如何修复它。

我已将<script>移至<head>，因此加载速度更快，即使我知道最佳做法是在</body>之前完成。

我看过一些帖子建议隐藏html，直到页面完全加载，但我最后得到了一个更长的空白页面，所以我觉得这不是我想要的选项。 / p>

不幸的是，我不熟悉Dev Tools的大部分功能。如果有人指出如何使用它来追踪正在发生的事情，我真的很感激。

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

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");
        }
    });

});

Answer 1

尝试将这些2放入标题中：

<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中删除变量

在Chrome中重新加载页面时发送无格式内容的Flash

1 个答案: