Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
desandro opened this issue Feb 9, 2014 · 9 comments
Closed

Comments

@desandro
Copy link
Owner

desandro commented Feb 9, 2014

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
Copy link
Owner Author

desandro commented Feb 9, 2014

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
Copy link

Youre a genius, thank you!

@desandro
Copy link
Owner Author

desandro commented Feb 9, 2014

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
Copy link

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
Copy link

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
Copy link

Update: Wrong link.

@desandro
Copy link
Owner Author

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
Copy link

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.

@desandro
Copy link
Owner Author

My example has been added to the docs in Appendix - Extra examples. Closing here

Repository owner locked and limited conversation to collaborators Jan 10, 2015
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants