使用 Bootstrap、Lazyload 和 Masonry 即时加载页面答案

【问题标题】：Loading page instantly using Bootstrap, Lazyload and Masonry使用 Bootstrap、Lazyload 和 Masonry 即时加载页面
【发布时间】：2016-02-21 16:16:56
【问题描述】：

目前，我正在使用 Bootstrap、lazyload 和 masonry 来实现网格视图。

我面临几个问题：

使用延迟加载会导致网格元素重叠。
页面加载不正确。当我看到整个砖石网格从左侧（不想要的）移动到中心（想要的）时，会有 3 秒的延迟。

当我在<head> 标签中加载我所有的 js 库（jQuery、Bootstrap、Masonry 和 Lazyload）时，第二个问题得到了解决。但是，这大大降低了我的网站速度，我想在关闭 <body> 标记之前结束。

  // 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 > #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 > 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();

<header id="header" class="container">
  <h1>Bootstrap 3 + Masonry 3</h1>
  <p class="lead">
    This is deployed with the <code>#grid</code> div fluid (that is, it has no Bootstrap <code>.container</code> class). To make it fixed simply add the <code>.container</code> class to it. Use the media queries in <strong>style.css</strong> to change
    the grid's post widths and margins.
  </p>
  <hr>
</header>



<!-- Posts -->

<!-- <div id="grid" class="container"> -->
<div id="grid">
  <div id="posts">
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/200x200" width="200" height="200">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/400x500" width="400" height="500">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/600x200" width="600" height="200">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/700x300" width="700" height="300">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/700x400" width="700" height="400">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/400x300" width="400" height="300">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/200x500" width="200" height="500">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/500x500" width="500" height="500">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/200x500" width="200" height="500">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/600x200" width="600" height="200">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/500x400" width="500" height="400">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/200x200" width="200" height="200">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/500x200" width="500" height="200">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/300x300" width="300" height="300">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/500x500" width="500" height="500">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/700x500" width="700" height="500">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/600x300" width="600" height="300">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/400x400" width="400" height="400">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/400x300" width="400" height="300">
    </div>
    <div class="post">
      <img class="lazy" data-original="http://placehold.it/700x400" width="700" height="400">
    </div>
  </div>
</div>



<!-- Footer -->

<footer id="footer" class="container">
  <hr>
  <p>Thanks for watching!</p>
</footer>
/* 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 > #posts .post {
    width: 335px;
  }
  #grid > #posts .post.cs2 {
    width: 100%;
  }
  .post img {
    padding: 0;
  }
}


/* Medium devices */

@media (min-width: 992px) {
  #grid > #posts .post {
    width: 445px;
  }
  #grid > #posts .post.cs2 {
    width: 100%;
  }
}


/* Large devices */

@media (min-width: 1200px) {
  #grid > #posts .post {
    width: 346px;
  }
  #grid > #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;
  }
}

这里是相关代码的小提琴：https://jsfiddle.net/rp0hm3h6/4/

【问题讨论】：

标签： javascript jquery twitter-bootstrap lazy-loading jquery-masonry

【解决方案1】：

已知图片延迟加载问题，解决方法是为每张图片设置正确的宽度和高度属性，让浏览器在不加载实际图片文件的情况下知道它们的大小。

【讨论】：

看看jsfiddle.net/rp0hm3h6/6 我已经为.post img 选择器添加了height: auto; 并在开头添加了小javascript 用于填充底部技巧（每个图像都被包装到一个高度为零的div 和填充-底部设置为 image_height/image_width*100%)。

【解决方案2】：

一种选择是尝试为每个 img 添加一个样式属性以及实际的 img 宽度和高度，因此延迟加载将具有砌体布局网格所需的宽度和高度。

<img class="lazy" data-original="http://placehold.it/200x200" width="200" height="200"  
style="width: 200px; height: 200px;">

【讨论】：