Masonry Hide Images until fully loaded

2 Views

I am trying to hide my Masonry images until the page finished loading as currently the images load in a long strip to the left of the screen, before organising themselves.

I cannot seem to get the container to hide and then show once everything else has been loaded.

Read More

Here is the link: http://inspiredworx-labs.com/sites/blg/

Here is my snippet (with commented out code that I’ve tried to implement for the hide/show bit): 

        <script>
    $(window).load( function(){   
            var $container = $('#masonry-container');
            // initialize
            $container.masonry({
              //columnWidth: 60,
              gutter: 6,
              itemSelector: '.masonry-item'
            });
    })

    /*
            $('#masonry-container').hide();
            $container.imagesLoaded(function(){
                $('#masonry-container').show();
            })          
    */
    </script>
Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You should include your Masonry instance within your images imagesLoaded like so:

    var $container = $('#masonry-container');
$container.imagesLoaded(function(){
    $container.masonry({
         itemSelector: '.masonry-item',
         gutter: 6
    });
});

  2. I do not getting whatever you have tried.

    But there is a javascript library that is “imagesLoaded“.
    that will help you
    I did it in this way

    //  created a array with image and data
 var elemar  = [];
$.each(data, function(j,subData){

    var img = document.createElement('img');
    img.src = 'images.jpg';
    item.appendChild( img );                        
    elemar.push(item);
});

// loading div after image loaded
imagesLoaded(elemar).on( 'progress', function( imgLoad, image ) {
        var item = image.img.parentNode;        
        container.appendChild( item );// container is an javascript , $('#containerdiv'), where all div will be publish
        msnry.appended( item ); // msnry intializaion
        });
});