title: Masonry add a loader at the bottom to show more images are still loading
body: <p>I am using masonry to load in lot's of images, I have it setup so that the images gradually load in (append) rather than having lots of white space on the page. You can see working l<a href="http://hutchcreative.co.uk/clients/pocko/talent/nomoco/" rel="nofollow">ive version here</a> to help show what I mean.</p>
  
  <p>However as the images are loading in its not very clear if there are still more images to be loaded in. Is it possible to append a loader.gif at the bottom to indicate that more images are still to come? Then once all of the images are loaded the loader.gif disappears.</p>
  
  <p>Here is my jquery:</p>
  
  <pre><code>$( function() {
          var $container = $('#artistDetWrap').masonry({
              columnWidth: 1,
              gutter: 0,
              itemSelector: '.artPost'
          });
  
          // reveal initial images
          $container.masonryImagesReveal( $('#images').find('.artPost') );
      });
  
      $.fn.masonryImagesReveal = function( $items ) {
          var msnry = this.data('masonry');
          var itemSelector = msnry.options.itemSelector;
          // hide by default
          $items.hide();
          // append to container
          this.append( $items );
  
          $items.imagesLoaded().progress( function( imgLoad, image ) {
              // get item
              // image is imagesLoaded class, not &lt;img&gt;, &lt;img&gt; is image.img
              var $item = $( image.img ).parents( itemSelector );
              // un-hide item
             $item.show();
              // masonry does its thing
              msnry.appended( $item );
          });
  
          return this;
      };  
  </code></pre>
  
  <p>And here is my HTML:</p>
  
  <pre><code>&lt;div id="artistDetWrap" class="entry-content clearfix"&gt;&lt;/div&gt;
  
  &lt;div id="images"&gt;
      &lt;div class="artPost col-lg-6"&gt;
          &lt;img width="1170" height="828" alt="dreams_FULL" class="attachment-full" src="myimgsrc.jpg"&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>Update:</strong></p>
  
  <p>I have added in the jquery to count images. They are all getting a class of loaded added to them as they load, so this part is working great. However the loader doesn't hide after they have all loaded. Here is my jquery:</p>
  
  <pre><code>$.fn.masonryImagesReveal = function( $items ) {
          var totalImage = $('.artPost').length;
          var msnry = this.data('masonry');
          var itemSelector = msnry.options.itemSelector;
          // hide by default
          $items.hide();
          // append to container
          this.append( $items );
  
          $items.imagesLoaded().progress( function( imgLoad, image ) {
              // get item
              // image is imagesLoaded class, not &lt;img&gt;, &lt;img&gt; is image.img
              var $item = $( image.img ).parents( itemSelector );
              // un-hide item
             $item.show();
              // masonry does its thing
              msnry.appended( $item );
              $item.addClass('loaded');
          });
  
          if (totalImage == $('.loaded').length)    // if you have other element with loaded class, add more selector to $('.loaded')
          $('#loader').hide();
          return this;
      };  
  </code></pre>