Question

I am using a get to load content to a div and then show it. Works great, very easy.

$.get($(this).attr("href"), function (data) {
  $('#boardData').html(data);
  $('#boardContent').show();
  $('#BoardImages a').lightBox();
});

I would like to only show the div, my $('#boardContent').show();, once all of the images have loaded from my data that I got via my get.

Answer 1

The way that I’ve done this — you really probably only need to worry about elements that get their content from elsewhere, like images — is to keep a count of the elements that need to load and use load event handlers on all those elements. When all of the elements are loaded, have your handler trigger the show. As a backstop you’ll want to set a timer that will trigger the show in case some of the elements get loaded before your handler is applied.

$.get($(this).attr("href"), function (data) {
      var images = $(data).find('img');
      var imageCount = images.length;
      var loaded = 0;
      var timer = setTimeout( function() {
               timer = null;
               $('#boardContent:hidden').show();
      }, 10000 );
      images.load( function() {
          ++loaded;
          if (loaded >= imageCount) {
             if (timer) clearTimeout(timer);
             timer = null;
             $('#boardContent:hidden').show();
          }
      });

      $('#boardData').html(data);
      $('#BoardImages a').lightBox();
});