Question

Erhm – not sure about this one. But here goes 🙂

I want a callback when all the .instagram-placeholders have been added.
But where, and how?

success: function(data) {
    for (var i = 0; i < 30; i++) {
        $("#instaWrap").append("<div class='instagram-placeholder'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.thumbnail.url +"' /></a></div>");
        total += 1; 
    }; 
    $("#instaWrap").append('<div class="clear"></div>');
}

Thanks a bunch 🙂

Answer 1

A simple answer would be:

success: function(data) {
    for (var i = 0; i < data.data.length; i++) {
        $("#instaWrap").append("<div class='instagram-placeholder'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.thumbnail.url +"' /></a></div>");
        total += 1; 
    }; 
    $("#instaWrap").append('<div class="clear"></div>');
    callback(); // just call the callback :)
}

But if you want to wait until all images are loaded, you can try this approach:

success: function(data) {
    imagesLoaded = 0;
    imagesToLoad = data.data.length;
    $.each(data.data, function() {
        // Create the elements:
        var el = $("<div class='instagram-placeholder'><a target='_blank' href='" + this.link +"'><img class='instagram-image' src='" + this.images.thumbnail.url +"' /></a></div>");
        // Bind load and error event of the image
        $('img', el).bind('load error', function() {
            if (++imagesLoaded == imagesToLoad) {
                callback(); // all images have been loaded
            }
        });
        // Append the element to the DOM
        $("#instaWrap").append(el);
        total += 1;
    });
    $("#instaWrap").append('<div class="clear"></div>');
}