Web design: enforce layout computed before rendering

One of my enduring frustrations with the web is that browsers will render before finishing the layout. This leads to components moving as I try to click, sometimes meaning I click on some unintended link. Is there a way to force browsers to compute the layout entirely before rendering at all?

Is an element/section in the page which is loaded after initial render ? May be try using a placeholder for the section if it is of fixed height?

Bootstrap 5 has placeholders - Placeholders · Bootstrap v5.1

You can achieve this without using bootstrap…

1 Like

Most of the time you cannot know the height beforehand.

@stevensonmt maybe you could have a display none by default, and update that when every component has been rendered along with a smooth animation. If everything gets loaded and rendered quickly enough, it will look nice.

edit: just in case you don’t know about it, there are browsers extension which let you write custom JS for any website you visit (you can target specific websites as well). You could thus generalise the idea of displaying the content elements only when everything has been loaded. It won’t solve all cases though.

1 Like