在dom准备好之前交换css文件，因为我不想让我的页面轻弹

Swap css files before dom is ready as i dont want my page to flick?

本文关键字：我的 我不想 因为 准备好 dom 交换 文件 css      更新时间：2023-09-26

磁头

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

您可以做的事情如下：

在初始页面中，除了一个小文件，上面写着：之外，根本不加载任何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开始在标题中插入到适当样式表的链接

加载完所有样式表后，删除指向上述样式表的链接，甚至可能删除#loaderdiv，再次使用javascript(平滑偏离路线，可能在短暂的最小延迟后，以防止其快速闪烁(

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

然而，这种技术的一大缺点是，非javascript用户将看不到除加载程序之外的任何内容。

顺便说一句，我个人认为这是应该由服务器处理的事情，它应该根据浏览器语言环境或其他什么在标题中设置正确的样式表。。。

您可以将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');
相关文章：