Prevent static files inside a css from being displayed before the page is loaded-CodePudding

I am modifying some JSP files and every time we upload a new version if people don't update the cache the styles are not rendered as they should. Looking not god and without styles applied.

To solve this problem we have followed an example from StackOverflow that adds a numeric value to the CSS file, preventing it from being cached in the browser. The specific link we have seen is this one:

Does anyone know how to avoid this? Thanks in advanced.

CodePudding user response：

Would something like the following help?

/* CSS */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

// Js
$(window).load(function() {  // Wait for window load
    // Animate loader off screen
    $("#loader").animate({
        top: -200
    }, 1500);
});

Like it is used here.

CodePudding user response：

I have already been able to solve it.

In the end I have chosen to nest inside a window.onload, the document.ready like this:

 window.onload = function () {
        document.getElementsByTagName("html")[0].style.visibility = "visible";
        var h, a, f;
        a = document.getElementsByTagName('link');
        for (h = 0; h < a.length; h  ) {
            f = a[h];
            if (f.rel.toLowerCase().match(/stylesheet/) && f.href && f.href.indexOf("custom-common.css") != -1) {
                var g = f.href.replace(/(&|\?)rnd=\d /, '');
                f.href = g   (g.match(/\?/) ? '&' : '?');
                f.href  = 'rnd='   (new Date().valueOf());
            }
        }
    $(document).ready(function () {
        $('.main-link').click(function () {

And change the visibility of the html document. I have omitted the rest of the code, but you can get an idea. Many thanks to Robert Bradley and Adam for shedding light and helping me.