Show AJAX content after images have loaded

Question

I am developing my own lightbox kind of jquery plugin. Everything works but I want to hide the loaded content until the images have loaded in the browser from the AJAX call. I found a similar post and I am using the following script but the setTimeout function is what reveals the content and not the .load function. Am I trying to achieve the impossible?

$.ajax({
      url: 'meet/'+ pLoad + '.html',  
      success: function(data) {
        var imageCount = $(data).filter('img').length;
        var imagesLoaded = 0;
        $(data).hide()
         .appendTo('#zoom_inner')
         .filter('img')
         .load( function() {
          ++imagesLoaded;
          if (imagesLoaded >= imageCount) {
          $('#zoom_inner').children().show();
          }
          });
        setTimeout( function() { $('#zoom_inner').children().show() }, 5000 );
       }
    });

Answer 1

If you investigate this article I think you can find solution for your problem (http://jqueryfordesigners.com/image-loading/)

Best wishes.

Answer 2

Regarding your comments:

data is just a string in your success callback - it's "html", but it's a string.

make it a node to use:

var $images = $(data); // i.e. turn <div><img /></div> into a div with an img as a child or whatever you got
var imageCount = $images.find('img').length;

cool, eh?