Масонство - использование с ImagesLoaded

Question

У меня запущены Masonry и ImagesLoaded, они оба работают нормально.

Но все же мои изображения все еще не загружаются в идеальную сетку. Только после того, как экран был перемещен несколько раз, он загружается правильно.

Вы можете увидеть страницу здесь: http://pagedev.co.uk/page-newsite/work.php

Любая помощь будет отличной!

Мой HTML это:

<div class="grid">
  <div class="grid-sizer"></div>

    <div class="grid-item grid-item--width2">
        <img src="http://placehold.it/660x550">
    </div>

</div>

CSS:

.grid {
    width:85%;
    height:auto;
    margin:0px auto;
    position:relative;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- Work grid-item ---- */

.grid-sizer,
.grid-item {
  width: 25%;
  position:relative;
}

.grid-item {
  height: auto;
  float: left;
}

.grid-item img {
  width:100%;
  height:auto;
}

.grid-item--width2 { width:  50%; }

JS:

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
$('.grid').imagesLoaded( function() {
    $('.grid').masonry({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
    });
});
</script>

Заранее спасибо.

подветренный