Reloading stylesheet without flashing of unstyled content using javascript/jQuery

Question

Problem background

I'm developing a web page where users can dynamically change and style a custom horizontal menu. So there's a bunch of style settings (height, padding, etc...) and a preview at the top of the page. When they change these settings, I reload the html for the menu and the css so it has the new values in place.

The problem

As you can see below, i'm loading the html, and once completed, i'm applying the html and reloading the css. This all works. However, there is a split second in most cases where the html flashes without any styling. I believe this is happening while the css is being regenerated. I need to prevent this.

How can I regenerate the stylesheet while preventing the small gap in time when there is no styling?

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

Are the customization values static? For example, for `height`, do you get to choose from, say, "25px", "50px", and "75px"? Or are some of them free-form inputs? — talemyn, Feb 03 '15 at 21:26

score 2 · Accepted Answer · answered Feb 03 '15 at 21:48

You could make an ajax call for the http://www.url2.com?cache="+timestamp first. Then in the callback of that, first append the link to the head, which should instantly load the stylesheet since its cached at that point. And finally update your preview section 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);
   });

});

This all assumes you have control over the cross origin setup of url2.com.

score 1 · Answer 2 · edited May 23 '17 at 10:24

You could also use lazyload js.

I have checked what it does and I've found that it adds an inline style with a css import in the header:

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

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

</style>

Maybe you could also add this manually with-out lazyload, but I haven't checked if that would work.

Please have a look at this SO question. There I have found the tip with lazyload.

A working demo of lazyload is below and here at jsFiddle.

(I haven't used an ajax call for the content because that should be not the problem. Just call lazyload in the done callback of your ajax and it should work.)

$(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>

Reloading stylesheet without flashing of unstyled content using javascript/jQuery

2 Answers2