0

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?

mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Rusty23
  • 71
  • 2
  • 8
  • Are you using the same query string on your CSS file across all your pages or a different query string for the same css file for each page? You could style the body element to hide the content then use the window.onload event to remove it so any glitches are hidden. See here https://stackoverflow.com/questions/9550760/hide-page-until-everything-is-loaded-advanced – Adam Nov 29 '22 at 17:42
  • Right now there is a different number for each page because it has to be executed on each page that contains that particular CSS. – Rusty23 Nov 29 '22 at 17:46
  • You could accept my answer if it was helpful to you. – Robert Bradley Dec 01 '22 at 00:01

2 Answers2

1

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.

Robert Bradley
  • 548
  • 2
  • 21
  • No, that's not what I want. I can't put images or spinners or anything until the page loads. I've tried hiding the whole HTML until the document is ready but it doesn't work as it should either. Thanks for the help anyways. – Rusty23 Nov 29 '22 at 19:17
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.

Rusty23
  • 71
  • 2
  • 8