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

Comments

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

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Feb 9, 2014

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@themesociety

themesociety Feb 9, 2014

Youre a genius, thank you!

Youre a genius, thank you!

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Feb 9, 2014

Owner

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

Owner

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

This comment has been minimized.

Show comment
Hide comment
@themesociety

themesociety 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. 👍

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

This comment has been minimized.

Show comment
Hide comment
@themesociety

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

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

This comment has been minimized.

Show comment
Hide comment
@themesociety

themesociety Feb 11, 2014

Update: Wrong link.

Update: Wrong link.

@desandro

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Feb 11, 2014

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@jaddict007

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

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

This comment has been minimized.

Show comment
Hide comment
@desandro

desandro Jan 10, 2015

Owner

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

Owner

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.