首先，让我说似乎只有 Chrome 有这个特定问题。一切都在 IE 中完美运行。 (Firefox 发生了一些奇怪的事情，但目前我真的只关心 Chrome。)
其次，我在 Django 中执行此操作，因此 {% template tags %}在 html 中。
我想在我的网站上制作一个“夜间模式”按钮。在我重新加载页面或转到网站上的另一个页面之前，一切都很好。在那些时候，我会看到一闪而过的无样式内容，但我不知道如何修复它。
我已经移动了我的 <script> s 至 <head>所以它们会加载得更快，即使我知道最好的做法是在 </body> 之前加载它们.
我看到一些帖子建议在页面完全加载之前隐藏 html，但我只是以更长的时间闪现空白页面，所以我认为这不是我想要的选项。
不幸的是，我不熟悉 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");
}
});
});
最佳答案
尝试将这 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 中删除变量
关于javascript - 在 Chrome 中重新加载页面时无样式内容的闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45851965/