CODEWITHSUNDEEP
javascriptjquerywordpress
Huw Rowlands
Huw Rowlands

Reputation: 591

Masonry Hide Images until fully loaded

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.

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>

Upvotes: 1

Views: 2256

Answers (2)

AfromanJ
AfromanJ

Reputation: 3932

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
    });
});

Upvotes: 2

developerCK
developerCK

Reputation: 4506

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
        });
});

Upvotes: 0

Related Questions