Link Clicking Before Javascript Loads (Problem)

Question

I'm using shadowbox for some html/iframe links, which effectively opens up the page in a lightbox. Everything works great - except when someone clicks before the javascript is done loading.

Now, the obvious answer is to not use links as the targets of loading the shadowbox. But this poses usability problems if javascript is disabled. Does anyone have any ideas on how else to solve the problem? I'm considering loading javascript inline that would deactivate the links until the page is done loading, although I'm not exactly sure how I'd approach that.

All ideas are welcome!

Answer 1

In general, I'd consider this to be a non-issue, but can't you just call the shadowbox processor inline directly after the links?

i.e.:

.link, .link, .link script $(".link").shadowbox(); /script

Answer 2

You can disable all links in a page using jQuery (a great minimalistic javascript framework)

<script type="text/javascript">
    $(function() {
        $('a').click(function(event) {
            event.preventDefault();
            return false;
        });
    });
</script>

Answer 3

You could define your links as

<a id="myLink" href="#" onclick="return false">...</a>

and then reassign the click event handler once your javascript is loaded. Or, if your links have non-JavaScript alternatives:

<a id="myLink" href="/path/to/nonJS/alternative.html">...</a>

Again, when your JavaScript loads you can add a click event handler and override the default action.

If it takes a while for all of your scripts to load, you might reconsider if you need to load all of them right away. If you do, then you could implement a loading screen (below example uses jQuery, but it doesn't have to):

<div id="loading">
    Loading...
</div>
<div id="content" style="display: none;">
  // Site content...
</div>
// Load your scripts here...
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#loading').hide();
    $('#content').show();
  });
</script>

This way your site content isn't visible until all of your scripts are loaded.