0

头

<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>

问题 我什至想在dom准备好删除css并动态添加css（我从json对象获取其文件路径）之前检查。我必须这样做的问题是在交换css文件时我可以看到行为（像闪烁）在我的页面上。想法？

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();
4

2 回答 2

1

你可以做的是这样的：

在您的初始页面中，根本不加载任何 css，除了一个小文件，上面写着： 

 /* 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;
      ...
    }

尽快开始在标题中插入指向适当样式表的链接，使用 javascript

#loader加载所有样式表后，再次使用 javascript删除指向上述样式表的链接，甚至可能是div

它可能并不完美，但您的用户会清楚发生了什么，并且您不会获得现在的闪烁效果。返回用户将永远不会看到加载程序，因为 css 文件已经在缓存中，事情应该足够快。

这种技术的一大缺点是非 javascript 用户除了加载器之外什么都看不到。

作为旁注，我个人认为这是应该由服务器处理的事情，应该根据浏览器语言区域设置在标题中设置正确的样式表或其他东西......

于 2013-04-09T19:17:02.480 回答
0

您可以将 css 作为文本文件加载并将其附加到样式标记中。这将确保文件已在其他任何内容之前加载。

$.ajax({
    type: "GET",
    url: fileName[i].file,
    dataType: "text",
    async: true,
    success: function (data)
    {
        $("head").append("<style data-href='" + fileName[i].file + "'>" +  data + "</style>");
    }
});

并删除此样式标签，

$("style[data-href='" + fileName[i].file + "']").remove();

或者您甚至可以禁用样式表

$("style[data-href='" + fileName[i].file + "']").attr('disabled', 'disabled');
于 2013-04-09T19:13:35.043 回答