0

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 live version here to help show what I mean.

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.

Here is my 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 by default
        $items.hide();
        // append to container
        this.append( $items );

        $items.imagesLoaded().progress( function( imgLoad, image ) {
            // get item
            // image is imagesLoaded class, not <img>, <img> is image.img
            var $item = $( image.img ).parents( itemSelector );
            // un-hide item
           $item.show();
            // masonry does its thing
            msnry.appended( $item );
        });

        return this;
    };

And here is my 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 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:

$.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 <img>, <img> 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;
    };
probablybest
  • 1,403
  • 2
  • 24
  • 47
  • did the image appended continuously without scrolling? and where is the function to know if there are more image to load or not – Kyojimaru Jun 27 '14 at 08:52
  • Yes the images append without scrolling. It waits for the image to be ready to load then appends it. – probablybest Jun 27 '14 at 09:14

1 Answers1

1

maybe you can try other way to show the loading image in the div before footer from the start like this

<div id="contentWrapper">
    <!-- Your Content -->
</div>
<div id="loader">
    <img src="/source/to/loadingimage.gif" />
</div>
<footer>
    <!-- Your Footer -->
</footer>

and give css to div loader

#loader { text-align:center }

and when all the image is appended, call

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

EDIT

count total image in the page that is hidden first

var totalImage = $('.artPost').length;

add class loaded in $items.imagesLoaded().progress( function( imgLoad, image ) function to declare if the images is already shown like this

$items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
    $item.show();
    // masonry does its thing
    msnry.appended( $item );
    $item.addClass('loaded');
});

then before return this; check if total loaded image is the same with total image with class artPost, like this

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

and put it after $item.addClass('loaded'); inside $items.imagesLoaded().progress( function( imgLoad, image ) where the image is processed everytime it's loaded

Kyojimaru
  • 2,694
  • 1
  • 14
  • 22