Grow your CSS skills. Land your dream job.

Masonry loading images display:none issue.

  • # February 27, 2013 at 4:33 pm

    When masonry loads images it first puts all the images into one column then sorts them. This creates a lot of space before the actual load.

    I tried to use CSS to add display:none to the container, then javascript display:block when everything is loaded. But its seems to only show the last image.

    Think I need masonry to do the display none so it can read all the images, but am not sure actually were to put this code.

    Any tips would be great, thanks.

    # February 27, 2013 at 6:01 pm

    Solved.

    $(document).ready(function(){
    var $container = $(‘.masonry-c’);
    var min_width = 266;
    $(‘.masonry-c’).hide();
    $container.imagesLoaded( function(){
    $(‘.masonry-c’).show();

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".