title: Detect when all content from an AJAX call is loaded? (like DOM.ready)
body: <p>I'm struggeling to solve a probably very simple task:
  I've a page with say 10 portfolio items. Each of this portfolio items can have a variable number of "detail images" that should be shown in an image gallery when the thumbnail of the portfolio item is clicked.</p>
  
  <p>I've managed to load all the detail images via AJAX when the thumb is clicked but I struggle to detect the moment all images for the image gallery are loaded to fire a calculation function.</p>
  
  <p>The background is, that I need to know how wide all galleryimages are together when they are horizontaly next to each other to put that total width on a wrapping slide container. To do that calculation I need to "wait" until all images are loaded and only then fire my function that calculates the width (width of image 1 + width of image 2 ...).</p>
  
  <p>I've tried </p>
  
  <pre><code>jQuery(document).ajaxComplete(function() { calculation(); });
  </code></pre>
  
  <p>but that is fired also for other ajax elements on the page.</p>
  
  <p>Is there a way to 'bind' the complete to my ajax call or ad a callback to my ajax?
  Something like this is what I'm looking for:</p>
  
  <pre><code>function ajax_load_slider(post_id){
       jQuery.ajax({
          url : MyAjax.ajaxurl,
          type : 'post',
          data : {
            action: 'ajax_slider',
                post_id: post_id,
          },
          success : function(response) {
              jQuery('#resultcontainer').html(response);
              if(AJAXComplete){
                  calculateWidth();
              }
          }
      });
  }
  </code></pre>
  
  <p>Thanks in advance!</p>