перегрузочных таблицы стилей без мигания контента с использованием без стилей JavaScript/JQuery

Question

Проблемы фона

Я занимаюсь разработкой веб-страницы, где пользователи могут динамически изменять и стиль пользовательского горизонтальное меню. Таким образом, есть множество настроек стиля (высота, заполнение и т. Д.) И предварительный просмотр в верхней части страницы. Когда они меняют эти настройки, я перезагружаю html для меню и css, чтобы он имел новые значения.

Проблема

Как вы можете видеть ниже, я буду загрузки HTML, и после его завершения, я подаю заявление в HTML и CSS перезагрузки. Все это работает. Тем не менее, в большинстве случаев есть расколотая секунда, где html мигает без какого-либо стиля. Я считаю, что это происходит, когда css восстанавливается. Мне нужно предотвратить это.

Как я могу восстановить таблицу стилей, предотвращая небольшой промежуток времени, когда нет стилизации?

$.get("http://www.url1.com", function(html) { 
    // add the new html 
    $(".preview-section").html(html); 

    // reload stylesheet 
    var timestamp = Math.round(+new Date()/1000); 
    $("head").append($("<link/>", { rel: "stylesheet", href: "http://www.url2.com?cache="+timestamp, type: "text/css" })); 
}); 

Answer 1

Вы можете сделать вызов AJAX для http://www.url2.com?cache="+timestamp первой. Затем в ответ на это сначала добавьте ссылку на голову, которая должна моментально загрузить таблицу стилей с момента ее кеширования в этой точке. И, наконец, обновите раздел предварительного просмотра html.

$.get("http://www.url1.com", function(html) { 

    var timestamp = Math.round(+new Date()/1000); 

    $.get("http://www.url2.com?cache="+timestamp, function() { 
     // stylesheet is now cached in the browser 
     // reload stylesheet 
     $("head").append($("<link/>", { rel: "stylesheet", href: "http://www.url2.com?cache="+timestamp, type: "text/css" })); 

     // add the new html 
     $(".preview-section").html(html); 
    }); 

}); 

Это все предполагает, что у вас есть контроль над установкой креста источника url2.com.

Answer 2

Вы также можете использовать lazyload js.

Я проверил, что он делает, и я нашел, что это добавляет встроенный стиль с импортом CSS в заголовке:

<style class="lazyload" charset="utf-8"> 

    @import "http://maxcdn.bootstrapcdn.com/bootstrap/… 

</style> 

Может быть, вы могли бы также добавить вручную с-из LazyLoad, но я не проверял, будет ли это работать.

Пожалуйста, взгляните на это SO question. Там я нашел чаевые с lazyload.

Рабочая версия lazyload находится ниже и здесь, в jsFiddle.

(я не использовал AJAX вызова для содержания, потому что должно быть не проблема. Просто позвоните LazyLoad в проделанном обратном вызове вашего AJAX, и он должен работать.)

$(function() { 
 

 
    var addContent = function() { 
 
     var $well = $('<p class="well"/>') 
 
      .text('This is stlyed by bootstrap'); 
 
     $('.preview-section').html($well); 
 
    }; 
 

 
    $('#addNewButton').click(function() { 
 
     // Load a CSS file and pass an argument to the callback function. 
 
     LazyLoad.css('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css', function (arg) { 
 
      // put your code here 
 
      addContent(); 
 
     }); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazyload/2.0.3/lazyload-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="addNewButton">Add element with stlye from external stlyesheet</button> 
 
<div class='preview-section'></div>