have colorbox working before page finished loading

Question

i have the following piece of code in the page HEAD:

    <script  type="text/javascript">        
$(document).ready(function(){
    $(".open_popup_clips").colorbox({width:"520px",height:"480px", iframe:true});       
});
</script>  

as a result, the pop up will open correctly only when the page finished loading, before that it
will open the link in the browser window, the regular way.
is the a way to make links open in pop up before page has completely loaded. i tried placing this block of code in the BODY but that did not work..
the best thing of course would be to speed up the load process but let's leave that aside for now.

thanx for any replay and have a nice day :-)

Answer 1

There's two options here:

One, place your JavaScript code at the BOTTOM of your BODY without the document.ready. This will be faster than document.ready binding.

Two, place your JavaScript code right below the element you're calling colorbox on. This is a little bit more messy, but will be called right after the element is added to the DOM and is your fastest option.

These are pretty much your only options as far as something faster than the ready event go for this sort of thing.

If you want to venture into scaryville, check this out: http://javascriptisawesome.blogspot.com/2011/07/faster-than-jquerydocumentready-wait.html To be honest, I haven't tried it before.

Answer 2

Adam's answer is typically good advice, but it isn't going to help with the current version of colorbox because it waits for the DOM to load before adding it's markup to your document. To run it sooner (say, immediately after the elements you want to use colorbox with) you'll have to make a small edit to the jquery.colorbox.js file. Comment out the following line like so:

// $(publicMethod.init);

Then manually call init() manually when you are ready to initialize colorbox. Example:

<a href='1.jpg' class='example'>1</a>
<a href='2.jpg' class='example'>2</a>
<a href='3.jpg' class='example'>3</a>
<script>
  $.colorbox.init();
  $('a.example').colorbox();
</script>