jQuery: Execute multiple Ajax request simultaneously

by Alex Azuero

HTML

<div id="dvImages"></div>

CSS

img {
    padding : 10px;
}

JavaScript

$(document).ready(function () {
    $.when($.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "moon",
        tagmode: "any",
        format: "json"
    }),
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
        tags: "bird",
        tagmode: "any",
        format: "json"
    })).then(function (res1, res2) {
        $.each(res1[0].items, function (i, item) {
            var img = $("<img/>");
            img.attr('width', '200px');
            img.attr('height', '150px');
            img.attr("src", item.media.m).appendTo("#dvImages");
            if (i == 3) return false;
        })
        $.each(res2[0].items, function (i, item) {
            var img = $("<img/>");
            img.attr('width', '200px');
            img.attr('height', '150px');
            img.attr("src", item.media.m).appendTo("#dvImages");
            if (i == 3) return false;
        })
    });
});