How to prevent flash un-styled content when injected class to body
Greeting all wise man! I really need your help here as I'm new to JS/DOM stuff. I have this script that basically get and set cookie and when specific element is trigger, it will store new cookie value and refresh the browser. The value then inject to body class. However, I've counter a problem when in the process of add new class to body, it will read default style (FOUC) before read current style css injected into its body开发者_StackOverflow中文版.
(function ($) {
var Cookies = {
init: function () {
themes = Cookies.getCookie('THEME');
if (themes != null && themes != '') {
document.getElementsByTagName('body')[0].className += ' custom-'+themes;
}
else {
return;
}
},
setCookie: function (name, value, expired) {
var expiredDate = new Date();
expiredDate.setDate(expiredDate.getDate() + expired);
document.cookie = name + '=' + escape(value);
(expired == null) ? '' : ';expires=' + expiredDate.toUTCString();
},
getCookie: function (name) {
if (document.cookie.length > 0) {
cookieStart = document.cookie.indexOf(name + '=');
if (cookieStart != -1) {
cookieStart = cookieStart + name.length + 1;
cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
return unescape(document.cookie.substring(cookieStart, cookieEnd));
}
}
return '';
}
};
$('.boxer').each(function () {
$(this).bind('click', function (e) {
e.preventDefault();
var element = $(this).attr('class').replace('boxer', '').replace(' ', '');
setTimeout(function () {
Cookies.setCookie('THEME', element, 1);
window.location.replace(window.location.href);
}, 100);
});
});
$(function () {
Cookies.init();
});
})(jQuery);
How can I prevent this problem? I've already tried put it as first head element before link element, however, it also failed.
Try setting the theme on the body tag without having to refresh the browser. One of the great things about jQuery is that you can inject the new body class without having to refresh the page. You should still set the cookie, though, because that is important for the rest of the website.
When you navigate from page to page you will need to employ some server-side scripting language to read the cookie and write the appropriate CSS class on the body tag prior to the page loading in the browser. In PHP this would look something like:
<body <?php if(isset($_COOKIE['THEME'])) { echo 'class="'.$_COOKIE['THEME'].'"'; } ?>>
I would not suggest trying this with JavaScript alone for the reason that you've stated, the page will load and not be styled until the JavaScript engine can run in the web browser and add the desired CSS classes.
加载中,请稍侯......
精彩评论