title: jQuery Ajax load HTML content with image, how to check whether all images are loaded?
body: <p>I'm doing a script for infinite scroll for my site:</p>
  
  <pre><code>$(window).scroll(function(){
    if($(window).scrollTop() == $(document).height() - $(window).height()){
      ...
      $.ajax({
        ...
        success: function(json) {if(json.success){
          ...
          // here I append an Ajax @response with a new element to my existing HTML
          $("#mindIndexSummaryFirst").append(json.items1);
          $("#mindIndexSummarySecond").append(json.items2);
          $("#mindIndexSummaryThird").append(json.items3);
          // here I try to check whether all images are loaded
          $("#mindIndexSummary img").on('load', function(){
            // and I need to call two functions on loaded element
            // hoverImg() need the loaded image to calculate the height
            $('.pi-hover-img'+json.course).hoverImg();
            $(".popup3").tooltip();
          });
        }
      ...
    });
  </code></pre>
  
  <p>A loaded HTML element is this:</p>
  
  <pre><code>&lt;div class="page-item pi-hover-img  pi-normal"&gt;
    &lt;a class="overlayPop" href="#"&gt;
    &lt;a class="item_uri" id="course153" href="#"&gt;
      &lt;img src="/public/file/course/image/153-course.png" class="pi-item-image"&gt;
    &lt;/a&gt;
    &lt;a href="#" class="popup5 hide-text" style="display: none;"&gt;
      &lt;img src="/public/file/account/image/282-user.jpeg" class="item_image"&gt;
    &lt;/a&gt;
    &lt;a class="popup action-button big_interested " id="course_153" href="javascript:;" style="top: -162.5px; left: 83.5px; display: none;"&gt; Mi interessa&lt;/a&gt;
    &lt;a href="javascript:;"&gt;Description&lt;/a&gt;
    &lt;a class="popup4 hide-text" href="javascript:;"&gt;Preview&lt;/a&gt;
    &lt;span class="popup2" style="display: none;"&gt;1€&lt;/span&gt;
    &lt;a href="/course/153/gestire-un-pubblico"&gt;
      &lt;h2 style="top: 320px;"&gt;Gestire un pubblico&lt;/h2&gt;
      &lt;span class="rfloat pi-icon"&gt;
        &lt;img src="/public/img/site_icon/video_course_black.png"&gt;
      &lt;/span&gt;
      &lt;div class="clearfix"&gt;&lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I load 5 elements, 15 images, but there is a possibility that fewer elements are loaded.</p>
  
  <p>The problem is that my function was called more than one time (I test this with alert) and I'm not sure secure that the function was called after image load.</p>
  
  <p>If someone had the same situation please suggest me something (P.S I apologize for my bad English).</p>