Question

加载后，如果用户使用备用主题，我的网站会运行此代码：

ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css");
AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() {
    AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
    });

AJAX_LoadResponseIntoElement应该显而易见，但这里是对ReplaceJSCSSFile的简短解释：它基本上搜索网页中的link元素，其src属性等于“css / skin1 .css“，此时它会创建一个新的link元素（ src =”css / skin2.css“）并使用.parentNode.replaceChild替换旧的用新的。

这个问题是initPage()设置屏幕上相对于静态元素位置移动的位置和某些div。这些静态元素的位置是从CSS中获取的，但是在代码运行之前没有应用CSS，initPage()因为它而把东西放在了错误的位置。

我尝试过使用回调：

ReplaceJSCSSFile("css/skin1.css", "css/skin2.css", "css", function() {
    AJAX_LoadResponseIntoElement("skinContainer", "skin" + themeSelect + ".txt", function() {
        AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
    });
});

不幸的是，这不起作用。据推测，它告诉浏览器替换CSS文件，并且只要它告诉浏览器这样做，它就会转到回调函数，使用AJAX来获取页面内容。我认为页面内容在CSS文件之前返回，这就是为什么在执行initPage()时没有应用新CSS。

是否可以在不使用备用样式表的情况下解决此问题？

除了备用样式表之外我唯一可以提出的是使用AJAX获取CSS内容（实际上在执行回调函数之前会等待服务器的响应）来替换“ css / skin1.css “link元素。

Answer 1

您可以捏造它并在回调中使用setTimeout，这样回调的主体就会在稍后运行。这为浏览器提供了一些恢复时间。

Answer 2

您还可以尝试合并您的css文件，只需切换主题，将自定义CSS类添加（或删除）到HTML标记。这会加快速度。

获取JavaScript以放弃CPU，以便浏览器可以应用新的样式表？

2 个答案: