How to call a function only after page has finished loading and after another function has been called

Question

So I'm using http://kenwheeler.github.io/slick/ and http://instafeedjs.com/ and I'm trying to make a carousel slider based on an instagram feed, the problem I'm running into is that since the content in #instafeed is dynamically loaded, it keeps returning back undefined in my javascript code because it hasn't been injected into the dom yet. How would I load the code after the function userFeed.run() has been called and the instagram photos have been injected?

$(window).bind("load", function() {             
    var userFeed = new Instafeed({
        get: 'user',
        userId: 434846375,
        accessToken: '#############################',
        limit: 5,
        template: '<div style="display: inline-block;"><img src="{{image}}" /></div>'
    });
   // userFeed.run();
    $.when(userFeed.run()).done(function()
    {

            $('.your-class').slick({
                arrows:true
            });
            var array = $( "#instafeed" ).toArray();
            for(i = 0; i < 5; ++i)
            {
            alert(array[i]);
            //$('.your-class').slickAdd(array[i]);
            }   
    });
});

Answer 1

Unfortunately it appears that userFeed.run() will just return true immediately, and you would need it to return a Deferred/Promise to work with $.when .

You can howerver add an after callback to the Instafeed initialization that should do what you want:

var userFeed = new Instafeed({
    get: 'user',
    userId: 434846375,
    accessToken: '#############################',
    limit: 5,
    template: '<div style="display: inline-block;"><img src="{{image}}" /></div>',
    after: function() {
       // Images added to DOM, do stuff here
    }
});