Packery inititated by html. How do i implement imagesLoaded?

I am creating a website with packery and i am trying to fix some layout issues with imagesLoaded. I am initiating packery through html like this:

 <div id="content" class="site-content inner js-packery"
  data-packery-options='{ "itemSelector": ".item", "gutter": 0}'>

And i am attempting to use imagesLoaded like this:

 <script>
$(function(){
    var $container = $('#container');
    $container.imagesLoaded( function() {
        $container.masonry();
    });
});
</script>

But it isnt working, and i have no idea what to do :(

The solution is to place the script in the bottom of the page, just above the closing body tag. Like this:

<?php wp_footer(); ?>
<script>
var container = document.querySelector('#blog-list-center');
var $pckry;
var $pckry = new Packery( container, {
// options
itemSelector: '.item',
gutter: 0,
});
// initialize Packery after all images have loaded
imagesLoaded( container, function() {
$pckry = new Packery( container );
});
</script>
</body>

</html>