jQuery initialization order

Question

I'm building a page where I want to use Galleria script (http://devkick.com/lab/galleria/) and jQuery's Accordion widget to hide away different categories of gallery's thumbnails. In my initialization I wrote as suggested by both scripts' manuals:

<script type="text/javascript">
        jQuery(function($) { 
        $('ul.gallery').galleria({
         insert: "#image"
        });

         $("#thumbs").accordion();

        });
</script>

The galleria() function creates thumbnails and assigns proper sizes to them. Then, the accordion() function assigns its styles and collapses the currently invisible elements. With the code above I have a problem with some thumbnail images becoming invisible due to having zero dimensions.

If I put alerts before the thumbnails are assigned their sizes in galleria() function, I can see that for images that are inside accordion's invisible pages, their container has zero dimensions at that point. That is very strange to me because I thought that these functions execute consecutively and accordion() is not called before galleria() has finished.

What's more strange, if I put an alert before the accordion function, then everything is processed in correct order.

It's obvious that I'm facing a race condition here. Why does it happen and what should I do to guarantee an orderly initialization sequence?

Answer 1

This is just a guess, but I'm guessing it has something to do with the scripts running before the images are downloaded. This would seem to explain why the alert() before the accordion function makes things work. It gives the images a chance to load.

If this is right, you would want to use jQuery's load() event handler to ensure that the images are fully loaded.

Docs for load(): http://api.jquery.com/load-event/

Answer 2

I would imagine that the race condition might be in the fact that all the images might not be downloaded yet once galleria has added them. That would cause the accordian function to assume the images are zero by zero.

The reason adding an alert works is because it takes and by the time you close it, the images have downloaded.

If you want to be sure of the execution order, look into firebug and console.log instead of using alerts, which don't block script execution like alert does.

Regarding your main issue, I'd look into seeing if galleria provides some callback functionality to ensure all the images are downloaded before moving on.