Rendering custom photo set using tumblr JSON

I am creating this custom theme www.designislikethis.tumblr.com, which uses the jQuery Masonry and the Slider plugins. In creating this theme I wanted to create my own photoset slideshow instead of messing around with the default Flash-based one.

I started by pulling the images from the JSON of each photoset post by the post's ID using JS and jQuery.

I then rendered these images onto my frontpage in a special div that is linked to a minimal jQuery slideshow plugin, so each image fades in and out.

The code I use to pull/render for each photoset post is as follows:

    function photoSet() {
    $('.photoset').each(function () {

            var postID = $(this).attr('id');
            var that = $(this);
               $.getJSON("http://designislikethis.tumblr.com/api/read/json?id="+postID+"&callback=?", 
                  function(data) {
                      var postPhotos = data["posts"][0]["photos"];
                      var postPermalink = data["posts"][0];
                            for(var i = 0; i<postPhotos.length; i++) 
                            {
                                var photo250 = new Image();
                                photo250.src = postPhotos[i]['photo-url-250'];
                                postLink = postPermalink["url-with-slug"];
                                var setClass = ".photoset"+ i;
                       开发者_运维知识库         var imgClass = ".img"+ i;
                                $(that).find('.slide').append('<a class="'+ setClass +'" href="'+postLink+'"><img class="'+ imgClass +'" src="' +photo250.src+ '"/></a>');
                            }
                 });
              });
   }

Now my problem lies in that all the other elements on my tumblr index page are not rendered with JSON, so they load faster. By the time my photo set renders it's divs are unproportional to everything that has loaded around it, and so the image slider wont kick in and you are left with a mess of rendered images.

What's most annoying about this problem is that some times it works fine, and others it's a mess, depending on how fast the page loads, or if you have the website already cached in your browser.

To see the extent of my Javascript and how I am calling this photoset funciton see here:

http://helloauan.com/apps/DILTtheme/utils.js

I know it's a little messy, for I am new to all of this. :)

Thanks.

---

I don't know if it will help, but you could try the following:

If the images are the same size and you know that size set the ".slide" div to that;

Try preloading the images and only starting the slide show when they are loaded. e.g using a preload plug-in.

and making use of the "callback" function.