0

I'm trying to change the bootstrap CSS style (I'll call it theme) of an HTML page. I want to switch between rows and cards style, which I have managed to do with some JavaScript and DOM manipulation. I also save the current theme in the local storage, so when refreshing the page I can set the theme chosen. I do all of this in the window.onload event.

The problem arises when I refresh the page: the theme is set correctly but it first shows the default one, and then it renders the one in localStorage.

How can I avoid this delay when setting the correct theme?

Improve this question

1 Answer 1

Reset to default
5

Two ideas:

  • It's generally better to listen for the DOMContentLoaded instead. The load event will fire only after all images, media, etc are downloaded. This may well happen far after the initial page load, so the browser has had time to do the initial paint in the meantime, meaning that the load event visibly occurs somewhat later. In contrast, DOMContentLoaded fires when the DOM is parsed and interactable, without additional delays. But, the DOM is not necessarily parsed immediately - there may be a bit of delay between (for example) the loading of the first half of the DOM and the loading of the rest, so in addition:

  • At the start of the page, hide the main page content (say, the article) with CSS, perhaps with article { display: none } or something of the sort. Then, in your DOMContentLoaded listener, fiddle with the DOM / CSS and change the theme as desired, and then make the article visible. This will ensure that the initial paint that the user sees will be painted with the desired theme, rather than seeing one theme, shortly followed by the actual desired theme.

If you can make all theme changes with CSS alone, it would be even better to set the correct stylesheet immediately, in the <head>, before the body content has started to load. (Don't put the CSS part in a DOMContentLoaded listener.) But this is only an option if your DOM changes don't involve Javascript.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is a good answer, but I would add one thing. Setting body {display: none} so the user sees nothing while the DOM content is loading is bad. The user may think the page is broken or too slow if they see nothing for 1 or 2 seconds. It would be much better to display a loading spinner or something that takes up the entire screen until the DOM content is loaded, and then show the page.
Thanks! Yes, DOMContentLoaded fires way faster than onload, and hiding the HTML element and showing it after setting the style does the trick and looks decent in my opinion. What I'm trying to do is to show a list of posts with previews or without. So the themes are two: hide the previews or show them.
@patrick3853 as I'm just hiding the list, it doesn't look too bad, but also it'd be nice to add a loader or something, good suggestion.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.