jquery help - initialize Masonry after all images have loaded

问题

I am using a masonry plugin but my images are overlapping when the page first loads. If I change the width of the browser they fall into place. The developer told me to do the following but I am unsure how to "add it: to my custom.js file properly.

I was just told to:

// with jQuery
var $container = $(’#container’);

// initialize Masonry after all images have loaded
$container.imagesLoaded(function(){
    $container.masonry();
});

Can anyone properly format this advice so I can use it?

回答1:

He wants you to use the imagesLoaded plugin.

Load that plugin

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

and use as follows:

$(document).ready(function () {
    var $container = $("#container");

    $container.imagesLoaded(function () {
        $container.masonry();
    });
});

What this does is:

1. Wait for the document to be ready
2. Wait for the images inside the container to have loaded
3. Run masonry on the container

回答2:

You can insert your code in $(window).load(function() and mansonry inizialize after all element are load.

Example:

$(window).load(function(){
var $container = $(’#container’);
$container.masonry();
});

来源：https://stackoverflow.com/questions/31992136/jquery-help-initialize-masonry-after-all-images-have-loaded