jquery - Masonry add a loader at the bottom to show more images are still loading -

i using masonry load in lot's of images, have setup images gradually load in (append) rather having lots of white space on page. can see working live version here show mean.

however images loading in not clear if there still more images loaded in. possible append loader.gif @ bottom indicate more images still come? once of images loaded loader.gif disappears.

here jquery:

$( 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 default         $items.hide();         // append container         this.append( $items );          $items.imagesloaded().progress( function( imgload, image ) {             // item             // image imagesloaded class, not <img>, <img> image.img             var $item = $( image.img ).parents( itemselector );             // un-hide item            $item.show();             // masonry thing             msnry.appended( $item );         });          return this;     };   

and here html:

<div id="artistdetwrap" class="entry-content clearfix"></div>  <div id="images">     <div class="artpost col-lg-6">         <img width="1170" height="828" alt="dreams_full" class="attachment-full" src="myimgsrc.jpg">     </div>   </div> 

---

update:

i have added in jquery count images. getting class of loaded added them load, part working great. loader doesn't hide after have loaded. here jquery:

$.fn.masonryimagesreveal = function( $items ) {         var totalimage = $('.artpost').length;         var msnry = this.data('masonry');         var itemselector = msnry.options.itemselector;         // hide default         $items.hide();         // append container         this.append( $items );          $items.imagesloaded().progress( function( imgload, image ) {             // item             // image imagesloaded class, not <img>, <img> image.img             var $item = $( image.img ).parents( itemselector );             // un-hide item            $item.show();             // masonry thing             msnry.appended( $item );             $item.addclass('loaded');         });          if (totalimage == $('.loaded').length)    // if have other element loaded class, add more selector $('.loaded')         $('#loader').hide();         return this;     };   

maybe can try other way show loading image in div before footer start this

<div id="contentwrapper">     <!-- content --> </div> <div id="loader">     <img src="/source/to/loadingimage.gif" /> </div> <footer>     <!-- footer --> </footer> 

and give css div loader

#loader { text-align:center } 

and when image appended, call

$('#loader').hide(); 

edit

count total image in page hidden first

var totalimage = $('.artpost').length; 

add class loaded in $items.imagesloaded().progress( function( imgload, image ) function declare if images shown this

$items.imagesloaded().progress( function( imgload, image ) {     // item     // image imagesloaded class, not <img>, <img> image.img     var $item = $( image.img ).parents( itemselector );     // un-hide item     $item.show();     // masonry thing     msnry.appended( $item );     $item.addclass('loaded'); }); 

then before return this; check if total loaded image same total image class artpost, this

if (totalimage == $('.loaded').length)    // if have other element loaded class, add more selector $('.loaded')     $('#loader').hide(); 

and put after $item.addclass('loaded'); inside $items.imagesloaded().progress( function( imgload, image ) image processed everytime it's loaded