How to properly use masonry.js and imagesLoaded.js together in your WordPress site?

I am running the masonry plugin on my wordpress site. It worked fine when i used it on its own and tested in firefox. Though I did notice that during the first load, the images get stacked on top of one another but on succeeding page loads, it works fine. However, when I tested it on chrome, safari and IE, I would have to refresh the page several times to make the masonry plugin work the way it should. So on page load, all the images are stacked on top of each other.

I found out that I should be using the imagesLoader plugin to make the masonry plugn in work the way it should. But I don't know how to make them work together.

Here is my script:

I have this in my functions.php:

function ms_theme_js() {

wp_enqueue_script(  'images_loaded', 'http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js', '', true  );
wp_enqueue_script(  'load_image', get_template_directory_uri() . '/js/imagesloaded.js', array('jquery'), '', true  );
wp_enqueue_script(  'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', '', true  );
wp_enqueue_script(  'tile_js', get_template_directory_uri() . '/js/masonry.js', array('jquery'), '', true  );

then on imagesloaded.js i have this script:

jQuery(document).ready(function($) {

var $container = jQuery('#hp-gallery');

$container.imagesLoaded( function(){ $container.masonry({ itemSelector: '.thirties', columnWidth: 3 }); });

then on masonry.js i have this script:

jQuery(document).ready(function($) {

var container = document.querySelector('#hp-gallery'); var msnry = new Masonry( container, { // options columnWidth: 3, itemSelector: '.thirties' });

});

Right now whenever I load the page on any browser the first time around, the images are stacked on top of each other.

Hope someone could help me out.