Question

To my way of thinking, I might be over-engineering with the recursive solution.

Wait 2 seconds for first set of modules to be loaded:

function loadContents() {
  $('[data-content]:not(.loaded)').each( function() {
    $(this).load($(this).data('content'));
    $(this).addClass('loaded');
  });
}
loadContents();
setInterval(loadContents, 2000);

When all of first set of modules are loaded, check for new modules:

function loadContents() {
  var notLoaded = $('[data-content]:not(.loaded)'),
  notLoadedLength = notLoaded.length;
  notLoaded.each( function(i,element) {
    $(element).addClass('loaded');
    $(element).load($(element).data('content'), function() {
      // one more has been loaded
      notLoadedLength--;
      if (notLoadedLength == 0) {
        alert("countdown good");
        loadContents();
      }
    });
  });
}
loadContents();

Answer 1

You should be able to do all of this with success handlers and no polling with timers.

You don’t specify exactly what you want to do, but if you want to load multiple things in parallel and know when they are all loaded, then you can just keep some sort of state on how many have been loaded and when the count shows that they are all now loaded, you will know you’re done.

If you want to load them sequentially, then you can just load the next one from each success handler. It’s probably easiest to create a list of things to be loaded and just have a generic success handler that gets the next one in the list and kicks off it’s load and removes it from the list. When the list of remaining items to load is empty, you’re done.

Edit: Looking further at your code, it looks like you’re loading them all in parallel. You can just create a success handler for each one that is loading, add the loaded class in that success handler and see how many more have not yet finished. I would suggest this:

function loadContents() {
  $('[data-content]:not(.loaded)').each( function() {
    var obj = $(this);  // save in local variable in function closure so we can reference it in the success handler
    obj.load(obj.data('content'), function() {
        obj.addClass('loaded');
        if ($('[data-content]:not(.loaded)').length == 0) {
            // all pieces of content are now loaded
        } else {
            // some pieces of content are still loading
        }
    });
  });
}
loadContents();

Edit 2: OK, based on your comments, I now understand the problem better. I would scope loadContents to a parent of the DOM tree and then call it on the newly loaded content from the success handler. This will work for inifinite levels and it’s safe because it only ever calls itself once for any given parent of the DOM tree. When there is no new content to load, it just has nothing to do and thus doesn’t call itself any more. Here’s what I would recommend:

function loadContents(root) {
  $('[data-content]:not(.loaded)', root).each( function() {
    var obj = $(this);  // save in local variable in function closure so we can reference it in the success handler
    obj.load(obj.data('content'), function() {
        obj.addClass('loaded');
        loadContents(obj);  // now load any contents from the newly loaded content
    });
  });
}
loadContents(document.body);   // start it off by looking in the whole DOM tree