Reveal each item after its image has loaded (like on Masonry main page)

[desandro]

From #500

When i use imagesLoaded to load all the images in the masonry container sometimes it takes a long time (10+ images) to load so the images are hidden before that. Is there a way to preload and fade in image after image? I saw that on your own page but was not able to reconstruct how you done it. :(

[desandro]

See http://codepen.io/desandro/pen/iHevA

  $('#load-images').click( function() {
    var $items = getItems();
    // hide by default
    $items.hide();
    // append to container
    $container.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('.item');
      // un-hide item
      $item.show();
      // masonry does its thing
      $container.masonry( 'appended', $item );
    });
  });

I'm using imagesLoaded's progress deferred API and Masonry's appended method.

Items are first hidden, then appended to the container. After each item is loaded, it un-hidden then gets revealed by Masonry.

I've added a link to this example in the docs.

[themesociety]

Youre a genius, thank you!

[desandro]

You can pull out this code into its own little helper plugin.

// requires itemSelector to be set on Masonry instance
$.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;
};

Which can then be used like

  $('#load-images').click( function() {
    var $items = getItems();
    $container.masonryImagesReveal( $items );
  });

See http://codepen.io/desandro/pen/kwsJb

[themesociety]

I have integrated the script in my theme and it works almost perfect, only question left is if you got a thumbnail grid you want your images always to be in the right order, but it seems that the image that is loaded first is displayed first?

Thanks again desandro. 👍

[themesociety]

Ive changed the example with the initial items a bit. I think because the items are already there on the masonry init and then getting appended again they create the high top margin.

At the moment i use an image container which contains my items that get appended after the function call. Thanks again for all the help desandro, without you i would be still stuck. :)

http://jsfiddle.net/chickberger/eVaMF/4/

[themesociety]

Update: Wrong link.

[desandro]

Unfortunately, 'Revealing items iteratively as they load' conflicts with 'revealing items iteratively as they load, in their original order'. To keep items in their order from the DOM, you can append them all in after imagesLoaded.

[jaddict007]

Thank you Desandro but unfortunately this pen http://codepen.io/desandro/pen/kwsJ is flickering on each image load. I have tried changing bg colour too for suppressing it but flickers each img load.