Cacher is the code snippet organizer for pro developers

(function($) {

  // My micro jQuery templating engine.
  // Include this script before your closing </body> tag.
  // Usage:
  //
  //    <section data-html="content"></section>
  //
  // Will load /html/content.html into <section>

  // Settings.
  var includes,
      opt,
      last,
      defaults = {
        dirPath: 'html/',
        dataAttr: 'data-html',
        loadingClass: 'loading',
        loadedClass: 'loaded'
      };

  $.fn.loadContent = function(options) {

    // Overwrite default options with user provided ones.
    opt = $.extend({}, defaults, options);

    // Find all includes in context.
    includes = $('[' + opt.dataAttr + ']', $(this)).not('.' + opt.loadedClass + ', .' + opt.loadingClass);

    // Postpone the ready event.
    if (includes.length) {
      $.holdReady(true);
    }

    var loadAllIncludes = function(includes, lastParent) {

      // Iterate over all includes.
      includes.each(function(i, el) {

        // Prepare to .load()
        var src = opt.dirPath + $(el).attr(opt.dataAttr) + ".html";
        $(el)
          // Add loading class.
          .addClass(opt.loadingClass)
          // Load the html file.
          .load(src, function( response, status, xhr ) {
            // Add loaded class.
            $(this).removeClass(opt.loadingClass).addClass(opt.loadedClass);

            // Watch for the last item.
            if (i == includes.length - 1) {
              last = true;
            }

            // Nested includes
            var nestedIncludes = $(el).find('[' + opt.dataAttr + ']');
            if (nestedIncludes.length) {
              loadAllIncludes(nestedIncludes, last);
            }
            // Release the 'ready' event after the last include loaded.
            else if (last && lastParent) {
              $.holdReady(false);
            }
          });
      });

    }

    // Load contents.
    loadAllIncludes(includes, true);

  }

  // Init.
  $(document).loadContent();

})(jQuery);

(function($) {

  // My micro jQuery templating engine
  // Include this script before your closing </body> tag.
  // Usage:
  //
  //    <section data-html="content"></section>
  //
  // This will load <html/content.html> into <section>

  var dirPath = "html/",
      includes = $("[data-html]"),
      len = includes.length;

  // Postpone the ready event.
  if (len) {
    $.holdReady( true );
  }

  // Load external contents
  includes.each(function(i, el) {
    var src = dirPath + $(el).attr("data-html") + ".html";
    $(el).load(src, function() {
      if (i == len - 1) {
        $.holdReady( false );
      }
    });
  });

})(jQuery);