best practice to initialize JavaScript for DOM elements above the fold

Question

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?