How to force user to not click until javascript has loaded (lightbox)

Question

I have a fairly large js lightbox gallery and an hasty user can click on a thumb before the page has finished loading, this may result in opening the actual image without the "cool" js popup effect.

Are there nice ways of "forcing" the user to wait for the page to finish loading before clicking?

Thank you very much

Answer 1

Not sure if i get you right:

You could try to put an transparent div or something above your conent, so the user won't be able to perform clicks. I.e. the clicks won't have the effect undesired by you - to be more exact. ^^

Answer 2

For this kind of problem, i use archetype.js. He will load all that your page need ( css, templates, javascript ), and then allow the user to do something. And you avoid to do this by hand ( it can be dirty and not so easy, if you use a lot of javascript )

Answer 3

The best way to achieve this would be to place a transparent or slightly grayed div across the entire page with a very high z-order value so it sits above all other elements.

The trick with this is you want to place it in the native HTML so it is loaded/rendered before any other processing occurs and the user has a chance to react. Then, simply remove it via js once ALL other loading has been done on the page.

Answer 4

Inline onclick="return false" for anchor -- easiest way.