0

Suppose you have some kind of listing and you allow this listing to be rendered via CSS either as a list or as a grid (via a varying CSS class or data attribute). Since this is purely a rendering issue it required not (re)processing by the web server, thus you can also simply implement the switch on the client side via JavaScript.

However, suppose you want to save the client's view mode choice, e.g. in the localStorage. Now when the page is rendered, the appropriate view mode needs to be restored.

But what is the best practice here in order to prevent the switch from the default view to the saved view to be visible when the content is above the fold?

Consider the following crude example: http://jsfiddle.net/yaubvq8d/27/

Here the JavaScript for changing the view mode and also loading the saved view mode from the localStorage is at the end of the body, which is obviously not ideal. To visualize the problem I also integrated an externally loaded JavaScript, that blocks rendering of the page for 2 seconds - so it takes at least 2 seconds, before the JavaScript for managing the view mode is actually executed. During these two seconds you first see the default view (which is the grid view) and then it would switch to whatever view you had previously selected (to test this you obviously have to click on "List" first and then run the fiddle again).

The only obvious solution I can think of is defining the view mode in a parent container (let's say the body) and then execute the JavaScript to load the view mode from the local storage right after the starting tag of the parent container.

But are there any other best practices, that I might miss?

fritzmg
  • 2,494
  • 3
  • 21
  • 51
  • I don't see what you're seeing, I'm in latest chrome, I do NOT see any list at all for 2 seconds, and then it renders correctly in which ever view mode I chose previously – Dale Aug 22 '18 at 09:56
  • Ignore my previous comment, it appears to be intermittent at best, sometimes it doesn't render anything, most of the time it does do what you desribe. Thinking on it – Dale Aug 22 '18 at 09:57
  • Usually modern browsers render the page immediately while processing the DOM elements. They do not wait until the whole document has been loaded. i.e. in theory, they should render the listings and then they stop rendering when they come to the ` – fritzmg Aug 22 '18 at 09:59
  • for intermittence of results http://shouldiblamecaching.com/ for the problem at hand, if you indeed have external scripts that may be blocking further processing of the DOM, set your one before these scripts, or even use the `defer` attribute of these external scripts. http://jsfiddle.net/yaubvq8d/34/ – Kaiido Aug 22 '18 at 12:23
  • Well yes, but that isn't really my question. My question is what is the best practice for executing JavaScript that influences the rendering of above the fold content. I only put the blocking script there to illustrate the problem. Even if I but the the JavaScript before the blocking resource, you might still see a flash of the wrong listing mode - depending on what content comes after the list and depending on when and/or how fast the browser is able to render the elements and execute JavaScript. – fritzmg Aug 22 '18 at 12:28

0 Answers0