jQuery pre document ready event

Question

Hi,

I have a list of 179 thumbnail images that I am trying to apply a jQuery lightbox tool to an unorder list of hyper-links.

The problem I have is, the jQuery isnt firing until the images have finished downloading, each image is around 23K so on their own, not so big, but as a group this equates to around 4MB.

There is a delay on IE (main browser used by clients) of a good 5 seconds before the page has completely downloaded every thumbnail and then allows the jQuery to fire.

I have tried putting the jQuery document ready event in various places with no success, and only been able to put a bandaid on by setting the css on the ul to hide using display:none before applying .show() after the lightbox has applied.

I was hoping there is a way to make the jQuery scripts fire before all the content has downloaded?

Cheers

UPDATE: My code as it stands is:

$(document).ready(function(){
    $("li.eventPhoto a").lightBox();
});

But this isnt applying in IE until all the images have loaded.

Answer 1

$(document).ready() will be executed as soon as the DOM has finished loading (ie, before all the images have finished downloading, but as soon as all the html for your page has finished loading). eg...

$(document).ready(function(){
    // do someting as soon as the document is ready, 
    // possibly before the images are loaded
}) ;

If you want to do something after all the images have finished loading, then you need to use the onload event, like so...

$(window).bind('load', function() {
    // Do something when the images have finished loading
});

If you want a script to execute now now now, at the point it appears in the html document, then don't use any of the "ready" functions. just do it right there are then...

<script>
    // code that you want to execute as soon as the browsers finds this bit of your doc.
    // note that you won't be able to access the DOM as it may not all be present
</script>

Answer 2

I would try the lazyload-plugin so the page can be loaded completely and fire the $(document).ready() before all the images are loaded, and you can than download all the images after that.

Answer 3

As rikh and Jens have mentioned, you can use the ready() event to fire the code before the thumbnails are loaded. However, you mention IE, which means you might already be using this event but fails in that browser (it might, as IE6/7 don't really have the event and jQuery either tries to detect it by other means or use load, I don't know).

If that's the situation, forget about the $(document).load()/$(document).ready() event, and insert the code in the html, just after the last link has been rendered.

Something like:

 <ul>
    (...) // List of thumbnails and links
 </ul>

 <script type="text/javascript">
    // Attach lightbox to links
 </script>

This way, the browser will attach the events related to the lightbox just as the HTML links have been created, not having to wait for the dom/html to load before they start working. The important thing to remember is that, in the HTML, before the tag, all the tags and elements needed by the script must have been rendered, and the necessary js libraries must have been referenced.