1

I'm working on a web application built with the original Struts framework. Our jsp files build the HTML using a web service, meaning that as the web page loads, we end up waiting for data to come back to build the HTML. (I've attached code that shows how an entire body is built using these types of calls.) We also end up waiting for some javascript libraries to execute.

On a particular webpage, I have multiple buttons that are all styled in a specific manner. When loading the webpage, the buttons show up for a split-second with the default style of the web browser, and then end up having the CSS applied. I would like to hide this rendering problem from the user.

I've read these suggestions from StackOverflow: Force browsers to load CSS before showing the page

A JavaScript solution is not great, because not everyone has JavaScript enabled. The CSS solution showed promise, but is complicated by the fact that we have two CSS files that are not both used on every screen - meaning, if I use two different overlays, then half the time, one will not disappear! If I had both CSS files use the same overlay, then wouldn't it disappear when the browser was done parsing whichever file was done first?

<body>
    <a class="skip" href="#MainContent">Skip Main Navigation</a>
    <div id="page">
        <tiles:insert attribute="header" />
        <tiles:insert attribute="mainMenu" />
        <a name="MainContent"></a>
        <tiles:insert attribute="content" ignore="true" />
        <tiles:insert attribute="footer" />
    </div>
</body>
Joshua Sharo
  • 31
  • 5
  • could you combine the two css files as one? – aaron lilly May 14 '19 at 18:38
  • I suppose it's a possibility. They're separated now due to being shared across platforms, so I was just wondering if there existed any alternatives. – Joshua Sharo May 14 '19 at 18:42
  • Essentially everyone has JavaScript enabled. Even most assistive browsers now run JavaScript. If you have two different overlays, in different CSS files, just `display: none` in each one for their respective overlays, or only load the CSS you actually care about. – Dave Newton May 14 '19 at 21:18

0 Answers0