title: Masonry JS initializing before images are loaded
body: <p>I am building a website to use as a portfolio for applying to university.
  I am quite bad with javascript and cannot get this to work even after reading all of the other similiar questions.</p>
  <p>Basically masonry is initializing before the images have finished loading and this breaks the layout.
  You can see the issue on my website <a href="https://vladimirstamenov.com" rel="nofollow noreferrer">vladimirstamenov.com</a></p>
  <p>I have been able ot replicate the issue 100% of the time by opening in private mode in firefox.</p>
  <p>This is the solution I have attempted to use.</p>
  <pre><code>$(window).load(function(){
        $('.grid').masonry({
        columnWidth: 200, 
        itemSelector: '.portfolio-item'
        });
      });
  </code></pre>
  <p>In the above piece of code changing columnWidth to whatever does not affect my grid at all which makes me think it is not working at all.</p>
  <p>My grid is structured like this:</p>
  <pre><code>&lt;div class=&quot;row grid&quot; data-masonry='{&quot;percentPosition&quot;: true }'&gt;
  
      &lt;div class=&quot;col-sm-6 col-md-4 portfolio-item&quot;&gt;Image&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>I have put the solution in a <code>&lt;script&gt;</code> at the end of my body tag. Within that tag I also initialize &quot;Animate On Scroll (AOS)&quot; and have a short script that I need for my navbar. <a href="https://i.stack.imgur.com/TaBv9.png" rel="nofollow noreferrer">screenshot reference</a></p>
  <p>Above that my javascript files are linked in the following order:
  JQuery &gt; Bootstrap(5) &gt; Masonry &gt; AOS &gt; Fancybox &gt; Custom JS</p>
  <p>Sorry if this is too much information. Thanks for your answers.</p>