embedly jQuery deferred.done() need help making function run after completion

Question

I have been racking my brain and trying many different ways of getting isotope to run after embed.ly returns my data.

$(function () {

    $.embedly.defaults.key = '0addb97cbe9c4522b1f52c128a15d48a';
    $('a.oembedj').embedly({
        display: function (data) {

            //   $(this).html(data.thumbnail_url);
            //$(this).html(function() {
            //var emph = data.thumbnail_url;
            // return '<img src=" ' + emph + '" />';
            //});
            $(this).html(function () {

                var emph = data.description;
                return '<p>" ' + emph + '"</p>';
            });
        }
    })

    $(function () {

        var $container = $('#container').isotope({
            itemSelector: '.news-item',
            columnWidth: 70
        });

        //  $('.news-item').click(function () {
        //    $(this).remove();
        //      $container.isotope();
        //    });

    })
});

I can't seem to get it to work. Here is my jsfiddle sample. Let me know what you think-

http://jsfiddle.net/daveferrara1/7XusF/28/

Answer 1

Part of my difficulty is that I don't know embedly or isotope, so I don't really know what constitutes success. Nevertheless, since nobody else has a better idea, I've done this: http://jsfiddle.net/7XusF/35/

I realized that display is called for each image, and you probably only want isotope called once. So I have display build the element (I did it in a bit more idiomatic way), and I put a load trigger on the img.

Each time an img is created, waitingFor is incremented. Each time a load completes, it is decremented. I assume that the load requests will come faster than the load completions, so you won't get down to zero multiple times. The Fiddle behaves as expected in that regard. Is the behavior what you want?

display: function (data) {
    var emph = data.thumbnail_url;
    waitingFor += 1;
    $('<img>').attr('src', emph).on('load', function () {
        waitingFor -= 1;
        if (waitingFor === 0) {
            var $container = $('#container').isotope({
                itemSelector: '.news-item',
                columnWidth: 70
            });
            console.debug('Isotoping.');
        }
    }).appendTo($(this));
}