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

@themesociety themesociety commented Feb 9, 2014

Youre a genius, thank you!

@desandro
Copy link
Owner Author

@desandro 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

@themesociety themesociety commented Feb 10, 2014

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

@themesociety themesociety commented Feb 11, 2014

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

@themesociety themesociety commented Feb 11, 2014

Update: Wrong link.

@desandro
Copy link
Owner Author

@desandro desandro commented Feb 11, 2014

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

@jaddict007 jaddict007 commented Dec 11, 2014

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

@desandro desandro commented Jan 10, 2015

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

@desandro desandro closed this Jan 10, 2015
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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.