Question 15101 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Prevent static files inside a CSS from being displayed before the page is loaded – Jquery

I am modifying some JSP files, and every time I upload a new version, if people don’t update the cache, the styles are not rendered as they should be; it is looking not good and without styles applied.

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

https://wpreset.com/force-reload-cached-css/

But I’ve found that whenever I press F5 or navigate to other JSP’s that apply the same stylesheet, the files that are part of that CSS file are always seen just before rendering. I added a GIF with a dummy example to exhibit what I mean:

Animated GIF demonstrating the problem

How could I avoid this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search