jQuery $.when with deferreds not working

Question

What I'm trying to do is make some action happen when two simultaneous image loads via ajax are done. To do this I created a custom Deferred to be resolved when the image loads are done.

<div id="i"></div>

$(document).ready(function() {
    $('#i').hide();
    var imgLoad = loadImgs();
    $.when(imgLoad).then(function() {
        $('#i').show('slow');
    });
});

function loadImgs() {
    var dfd = $.Deferred();

    var matrix = $.getJSON("https://graph.facebook.com/thematrixmovie");
    var pulp = $.getJSON("https://graph.facebook.com/pulpfiction");

    $.when(matrix, pulp).then(function(m, p) {
        mImg = '<img src=' + m[0].picture + '>';
        pImg = '<img src=' + p[0].picture + '>';
        $('#i').show().append(mImg + pImg);
        dfd.resolve;
    });
    return dfd.promise();
}

You can try this on JSFiddle.

I've used Eric Hynds post including a working example as a reference but still haven't gotten it to work. Any ideas?

Answer 1

You're using $.when correctly, but you try to call the resolve method like this:

dfd.resolve;

Unlike some other languages, JavaScript doesn't allow you to omit the parentheses in a method call. You just need to add them and your code works correctly!

dfd.resolve();