Предварительно загрузите файл в javascript, перед его отображением

Question

У меня есть несколько файлов CSS, сгенерированных в PHP.

Я изменяю текущий файл CSS с событием клика.

Но это делает неприятный эффект внезапной вспышки между каждым изменением (только при первой загрузке из них, в следующий раз они находятся в кеше и не плохой эффект).

Как я мог предварительно загрузить (но не отобразить) этот файл CSS событием click?

$('.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')); 
}); 

Answer 1

Я предполагаю, что это «эффект вспышки» означает, что, как и в процессе загрузки CSS, новые правила применяются постепенно, но вы хотите, чтобы все их применять сразу. Это правильно? Возможно, вы могли бы добавить вновь созданный элемент css в dom (чтобы он начал загрузку), но отрегулируйте его атрибуты, чтобы он не интерпретировался как таблица стилей (например, не используя rel="stylesheet"). Когда это будет сделана загрузка, вы снова настроите его с правильным значением, которое должно заставить все изменения появиться мгновенно.

Другой вариант (хотя это потребует изменения вашего css) будет создавать класс, который будет применяться к body, и убедитесь, что каждое правило ссылается на элементы внутри body.myclass. Когда css будет загружен, примените этот класс к телу.