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/