Question

I am writing a script using jQuery and Flickr REST API.

following the the pseudo algo

1) Hit Flickr API and get a list of photos using $.getJSON nad create li list elements:

create_gallery: function(){
    $.getJSON(
        $.prep_api_url(),
        function(data){
            $.each(data.photos.photo, function(i,item){
                var photo_raw_url = 
                    'http://farm' + item.farm + '.static.flickr.com/' + 
                    item.server + '/' + item.id + '_' + item.secret;
                var photo_url = photo_raw_url + '_b.jpg';
                $('<li><a id="' + item.id + '" class="image_trigger" href=' + 
                   photo_url + '><img class="thumbnails" src=' + photo_raw_url +
                       '_s.jpg' + ' width=22 hight=22 /><a/>' +
                       '</li>').appendTo('.image_thumbs');
            });
            $('.thumbnails').css({'opacity' : '.6'});
        }
    );
},

2) Preload all the images by refferring created list (I have Problems Here)

3) On click of every image display the image from preloaded array

Now I want this

1) get the JSON object from Flickr

2) create the list and append it to DOM

3) after successfull insertion, run through all images from list and preload them sequentially one by one.

I have also tried async option, nothing happend

Answer 1

I used JS image object and load functions in a while loop to preload images before adding them to DOM.

you can find the result by viewing the source code at: http://www.neerajkumar.name/necromancer/