Jquery: How to disable an image's click function while loading?

Question

This won't work using:

$('div#menuBar,#goLeftBtn,#goRightBtn').attr('disabled', true);

in the document.ready

Any ideas? Thanks!

EDIT:
My html is basically like this:

  <div id="floatRight">
       <img src="./images/all_left.png" id="goAllLeft" class="arrow" />
       <img src="./images/left.png" id="goLeft" class="arrow" />
       <img src="./images/right.png" id="goRight" class="arrow"/>
       <img src="./images/all_right.png" id="goAllRight" class="arrow" />
    </div>

I know those aren't the exact image names in the jquery code above, but that is how all of my img's are basically set up & for that particular line of code I only need those img's to be disabled.

Answer 1

Rather than trying to disable while loading can you not bind the click events until the document is loaded?

If these are all images without being wrapped by anchor tags you can accomplish this easily.

<img id="menuBar" />
<img id="goLeftBtn" />
<img id="goRightBtn" />

currently no click events bound so there's really nothing to disable

<script type="text/javascript">
    $(function(){
        $("#goLeftBtn").click(function() { /* go left */ });
        $("#goRightBtn").click(function() { /* go right */ });
        $("#menuBar").click(function() { /* go menu? */ });
    });
</script>

if you're wrapping these in anchor tags you won't be able to call e.preventDefault to stop the click event from happening since the page isn't finished loading and the jQuery events are not bound.

---

And if you've bound your click events inline (might not be a good idea) like so:

<img id="menuBar" onclick="return DoMenuStuff();" />
<img id="goLeftBtn" onclick="return GoLeft();" />
<img id="goRightBtn" onclick="return GoRight();" />

You can always do something like this:

<script type="text/javascript">
    var loaded = false;
    $(function(){
        loaded = true; // page done loading
    });

    function DoMenuStuff()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoLeft()
    {
        if(loaded) { /* do stuff */ }
    }

    function GoRight()
    {
        if(loaded) { /* do stuff */ }
    }
</script>

Answer 2

$('div#menuBar,#goLeftBtn,#goRightBtn').click(function() { return false; });

will work until you're ready to activate it.

Or actually why don't you just not attach a click event until it's loaded?

Answer 3

This actually would work, which means this would add a disabled attribute to #menuBar, #goLeftBtn and #goRightBtn.
Unfortunatly that doesn't help to cancle the event handler, since an <img> can't become "disabled".

So you need to remove/unbind the handler itself. That again depends on how you are binding the click event. If you're doing it with jQuery, you can use .unbind().

If you are using an inline event handler, you need to remove or modify it, to prevent the click handler from execution.

Answer 4

You could put a <div> on the page, positioned absolutely to cover the entire viewport, and make it transparent but visible with a big z-index. That should block all clicks from making it through to the real page elements. In your document "load" handler, make that "shroud" <div> go away (or make it "display: none").