在javascript事件上预加载一个文件，然后再显示它

Preload a file on javascript event, before display it

本文关键字：文件 一个 然后 显示 事件 javascript 加载      更新时间：2023-09-26

我有几个用PHP生成的CSS文件。

我用一个点击事件来更改当前的CSS文件。

但它在每次更改之间都会产生令人讨厌的白色闪光效果（仅在第一次加载时，下次在缓存中时，效果不错）。

如何通过单击事件预加载（但不显示）此CSS文件？

$('.button').click(function(){
    // Here I would like to preload the file
    ...
    // Here I display it
    $("#css").attr("href","css.php?id="+$(this).attr('id'));
});

EDIT>解决方案

/* HTML File */
<link type="text/css" rel="stylesheet" href="css.php?id=1" id="css"/>
<link type="text/css" href="css.php?id=2" id="nextcss"/>
/* JS file */
$('.button').click(function(){
    // Preload the file
    $("#nextcss").attr("href","css.php?id="+$(this).attr('id'));
    /* Here a lot of code with ajax...*/        
    // Here I display it
    $("#css").attr("href","css.php?id="+$(this).attr('id'));
});

我假设这种"闪光效果"意味着，在加载CSS时，新规则将被增量应用，但您希望所有规则都能同时应用。是这样吗？也许您可以将新创建的css元素附加到dom（确保它将开始加载），但调整其属性，使其不会被解释为样式表（例如，不使用rel="stylesheet"）。加载完成后，您可以使用正确的值再次调整它，这将使整个更改立即出现。

另一个选项（尽管这需要更改css）是创建一个类，应用于body，并确保每个规则都引用body.myclass中的元素。加载完css后，将该类应用于正文。

相关文章：