交换CSS文件之前dom是准备好，因为我不想让我的页面轻弹？ [英] Swap css files before dom is ready as i dont want my page to flick?
问题描述
头
< head>
< meta charset =UTF-8/>
< title> abc< / title>
< script type ='text / javascript'src ='/ js / jquery-min.js'>< / script>
< link rel =stylesheettype =text / csshref =/ css / style.css>
< script type ='text / javascript'src ='/ js / service.js'>< / script>
< / head>
问题
我想在dom之前检查准备删除css和动态添加css（其文件路径我从json对象）。问题为什么我必须这样做是交换CSS文件，我可以看到我的页面上的行为（如闪烁）。想法？
service.js中的方法
parse：function（data）{
var fileName = data.css;
var styleFound = false;
$（'link'）。each（function（）{
for（i = 0; i
styleFound = true;
$（this）.remove（）;
console.log
}
}
}）;
if（styleFound）{
for（i = 0; i
document.createStyleSheet fileName [i] .file）;
else {
$（head）。append（$（< link rel ='stylesheet'type ='text / css'href ='+ fileName [i] .file + /））;
}
}
}
}，
};
getService（）;
你可以做的是这样： p>
，不要加载任何css，除了一个小文件，如下所示：
/ *隐藏所有内容* /
* {
display：none;
}
/ *显示某种加载器* /
#loader {
display：block;
background：rgba（0,0,0，.8）url（image / loading.gif）no-repeat center center;
position：fixed;
top：0;
bottom：0;
left：0;
right：0;
...
}
使用javascript
链接到标题中相应的样式表加载所有样式表时，删除上述样式表的链接， #loader div，再次使用javascript（平滑过程，或许经过短暂的最小延迟，以防止它快速闪烁）
它可能不是完美的，但它会清楚，你的用户什么是hapenning，你不会得到你现在的闪烁效果。返回的用户永远不会看到加载器，因为css文件已经在缓存中，事情应该足够快。
这种技术的一大缺点是非JavaScript用户除了加载器之外不会看到任何东西。
作为一个侧面，我个人认为这是应该由服务器处理，应该在标题中设置正确的样式表，基于浏览器langauge语言环境或...
Head
<head>
<meta charset="UTF-8"/>
<title>abc</title>
<script type='text/javascript' src='/js/jquery-min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type='text/javascript' src='/js/service.js'></script>
</head>
Problem I want to check even before the dom is ready to remove the css and dynamically add the css(whose filepath i get from json object).The problem why i have to do this is whil swapping the css files i can see the behaviour(like flicker) on my page. Ideas?
Method inside service.js
parse : function(data){
var fileName = data.css;
var styleFound = false;
$('link').each(function(){
for(i=0; i<fileName.length;i++){
if($(this).attr('href')=== fileName[i].file){
styleFound = true;
$(this).remove();
console.log(this);
}
}
});
if(styleFound){
for(i=0; i<fileName.length;i++){
if (document.createStyleSheet)
document.createStyleSheet(fileName[i].file);
else {
$("head").append($("<link rel='stylesheet' type='text/css' href='"+fileName[i].file+"' />"));
}
}
}
},
};
getService();
what you could do is something like this:
in your initial page, do not load any css at all, except for a little file that says something like:
/* hide everything */
* {
display: none;
}
/* show some sort of loader */
#loader {
display: block;
background: rgba(0,0,0,.8) url(image/loading.gif) no-repeat center center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
...
}
As soon as you can, start inserting the links to the appropriate stylesheets in your header, with javascript
When all stylesheets are loaded, remove the link to the above stylesheet, and perhaps even the #loader div, again with javascript (smooth off course, and perhaps after a short minimum delay to prevent it from flashing by real quick)
It might not be perfect, but it will be clear to your users what's hapenning, and you won't get the flashing effect you have now. Returning users will never see the loader as things should go quick enough with the css files already in cache.
Big disadvantage of this technique is that non-javascript users will not see anything except for the loader however.
As a sidenote, personally I think this is something that should be handled by the server, wich should set the correct stylesheets in the header, based on the browser langauge locale or something...
这篇关于交换CSS文件之前dom是准备好，因为我不想让我的页面轻弹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
