Zunächst möchte ich sagen, dass es nur Chrome zu sein scheint, die dieses spezifische Problem hat. Im IE läuft alles einwandfrei. (Firefox hat ein bisschen etwas komisches vor sich, aber ich bin wirklich nur mit Chrome an diesem Punkt beschäftigt.)Flash von unbestätigten Inhalten beim erneuten Laden der Seite in Chrome
Zweitens mache ich das in Django, daher die {% template tags %} in der html.
Ich versuche, eine "Nachtmodus" -Taste auf meiner Website zu machen. Es funktioniert alles gut, bis ich die Seite neu lade oder auf eine andere Seite der Seite gehe. Zu diesen Zeiten bekomme ich einen Flash von unstyled Content und ich habe keine Ahnung, wie ich das beheben kann.
zog ich bereits meinen <script> s <head>, damit sie schneller geladen werden, auch wenn ich am besten kenne Praxis ist, aber sie direkt vor </body>.
Ich habe ein paar Beiträge gesehen, die das Ausblenden des HTML-Codes empfehlen, bis die Seite voll geladen ist, aber ich habe gerade einen noch längeren Flash einer leeren Seite gefunden, also denke ich, dass das nicht die Option ist, die ich bevorzugen würde.
Leider bin ich nicht vertraut mit den meisten Features von Dev Tools. Wenn jemand Hinweise dazu hat, wie man das verfolgt, würde ich das sehr schätzen.
Ich frage mich, ob jemand andere Ideen hat. Vielen Dank.
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");
}
});
});
Fabrikat sicher, dass das '# bootstrap-css'-Element vor diesem Skript ist . Versuchen Sie, das Skript zu inlinen. –