title: Loading page instantly using Bootstrap, Lazyload and Masonry
body: <p>Currently, I'm using Bootstrap, lazyload and masonry to implement a grid view.</p>
  
  <p>I'm facing a couple of issues:</p>
  
  <ol>
  <li><p>Using lazyload causes the grid elements to overlap.</p></li>
  <li><p>The page doesn't load with proper masonry layout. There is a 3-second delay when I can see the entire masonry grid shift from left(undesired) to center(desired). </p></li>
  </ol>
  
  <p>The 2nd issue was resolved when I loaded all my js libraries (jQuery, Bootstrap, Masonry and Lazyload) in the <code>&lt;head&gt;</code> tag. However, this is slowing down my website a lot and I wanted to put in the end just before closing the <code>&lt;body&gt;</code> tag.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  // Takes the gutter width from the bottom margin of .post
  
    var gutter = parseInt(jQuery('.post').css('marginBottom'));
    var container = jQuery('#posts');
  
  
  
    // Creates an instance of Masonry on #posts
  
    container.masonry({
      gutter: gutter,
      itemSelector: '.post',
      columnWidth: '.post'
    });
  
  
  
    // This code fires every time a user resizes the screen and only affects .post elements
    // whose parent class isn't .container. Triggers resize first so nothing looks weird.
  
    jQuery(window).bind('resize', function() {
      if (!jQuery('#posts').parent().hasClass('container')) {
  
  
  
        // Resets all widths to 'auto' to sterilize calculations
  
        post_width = jQuery('.post').width() + gutter;
        jQuery('#posts, body &gt; #grid').css('width', 'auto');
  
  
  
        // Calculates how many .post elements will actually fit per row. Could this code be cleaner?
  
        posts_per_row = jQuery('#posts').innerWidth() / post_width;
        floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
        ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
        posts_width = (ceil_posts_width &gt; jQuery('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
        if (posts_width == jQuery('.post').width()) {
          posts_width = '100%';
        }
  
  
  
        // Ensures that all top-level elements have equal width and stay centered
  
        jQuery('#posts, #grid').css('width', posts_width);
        jQuery('#grid').css({
          'margin': '0 auto'
        });
  
  
  
      }
    }).trigger('resize');
  
  
    $("img.lazy").lazyload();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header id="header" class="container"&gt;
    &lt;h1&gt;Bootstrap 3 + Masonry 3&lt;/h1&gt;
    &lt;p class="lead"&gt;
      This is deployed with the &lt;code&gt;#grid&lt;/code&gt; div fluid (that is, it has no Bootstrap &lt;code&gt;.container&lt;/code&gt; class). To make it fixed simply add the &lt;code&gt;.container&lt;/code&gt; class to it. Use the media queries in &lt;strong&gt;style.css&lt;/strong&gt; to change
      the grid's post widths and margins.
    &lt;/p&gt;
    &lt;hr&gt;
  &lt;/header&gt;
  
  
  
  &lt;!-- Posts --&gt;
  
  &lt;!-- &lt;div id="grid" class="container"&gt; --&gt;
  &lt;div id="grid"&gt;
    &lt;div id="posts"&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/200x200" width="200" height="200"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/400x500" width="400" height="500"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/600x200" width="600" height="200"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/700x300" width="700" height="300"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/700x400" width="700" height="400"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/400x300" width="400" height="300"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/200x500" width="200" height="500"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/500x500" width="500" height="500"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/200x500" width="200" height="500"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/600x200" width="600" height="200"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/500x400" width="500" height="400"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/200x200" width="200" height="200"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/500x200" width="500" height="200"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/300x300" width="300" height="300"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/500x500" width="500" height="500"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/700x500" width="700" height="500"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/600x300" width="600" height="300"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/400x400" width="400" height="400"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/400x300" width="400" height="300"&gt;
      &lt;/div&gt;
      &lt;div class="post"&gt;
        &lt;img class="lazy" data-original="http://placehold.it/700x400" width="700" height="400"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;!-- Footer --&gt;
  
  &lt;footer id="footer" class="container"&gt;
    &lt;hr&gt;
    &lt;p&gt;Thanks for watching!&lt;/p&gt;
  &lt;/footer&gt;
  /* Default tags and Bootstrap classes */
  
  body {
    font-family: 'PT Sans Caption', sans-serif;
    color: #000099;
    padding: 40px 0;
  }
  
  .lead {
    padding: 40px 0;
  }
  
  
  /* Grid */
  
  #posts {
    margin: 30px auto 0;
  }
  
  .post {
    margin: 0 0 50px;
    text-align: center;
    width: 100%;
  }
  
  .post img {
    padding: 0 15px;
    width: 100%;
  }
  
  #grid.container .post img {
    padding: 0;
  }
  
  
  /* Medium devices */
  
  @media (min-width: 768px) {
    #grid &gt; #posts .post {
      width: 335px;
    }
    #grid &gt; #posts .post.cs2 {
      width: 100%;
    }
    .post img {
      padding: 0;
    }
  }
  
  
  /* Medium devices */
  
  @media (min-width: 992px) {
    #grid &gt; #posts .post {
      width: 445px;
    }
    #grid &gt; #posts .post.cs2 {
      width: 100%;
    }
  }
  
  
  /* Large devices */
  
  @media (min-width: 1200px) {
    #grid &gt; #posts .post {
      width: 346px;
    }
    #grid &gt; #posts .post.cs2 {
      width: 742px;
    }
  }
  
  
  /* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
  
  
  /* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
  bleed if you will) the same width as the .post margins posts (50px). Basically I'm
  being really picky about whitespace. If you don't care, no problem, just delete this.
  Can this be done with Masonry options? */
  
  @media (min-width: 1300px) {
    #grid {
      left: -50px;
      padding-left: 50px;
      padding-right: 50px;
      position: relative;
    }
    #grid.container {
      left: auto;
      padding-left: 15px;
      padding-right: 15px;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the fiddle with relevant code: <a href="https://jsfiddle.net/rp0hm3h6/4/" rel="nofollow">https://jsfiddle.net/rp0hm3h6/4/</a></p>