javascript - 使用加载图像的砌体

Question

我是一个 js 新手，希望这个问题看起来不会太愚蠢。

我正在为我的网站使用砌体 - 工作正常。 我想让我的盒子在砌体完成加载时出现。在互联网上搜索我发现有几篇文章推荐使用 imagesloaded 插件来解决这个问题。它只是没有改变任何东西。这意味着:我的布局和内容框一直被弄乱，直到砌体完成加载，就在那时这些框突然跳到正确的位置。

我的代码:

$(document).ready(function() {

    var $container = $('#post-area');
    $container.imagesLoaded( function() {
        $container.masonry({
            itemSelector : '.box',
            columnwidth: 300,
            gutter: 20,
            isFitWidth: true,
            isAnimated: !Modernizr.csstransitions
        });    
    });
});

我也遇到了这个 Firebug 错误:

TypeError: EventEmitter is not a constructor
ImagesLoaded.prototype = new EventEmitter();

我在我的网站末尾像这样加载 imagesloaded js(如果 imagesloaded 已经包含在砌体中，我找不到任何信息，有些人写道它不再包含 - 令人困惑):

<script src="http://www.domainname.com/js/imagesloaded.js"></script>

如果有人能帮助我，我会很高兴。并告诉我 imagesloaded 是否是解决此问题的正确插件!

Answer 1

imagesLoaded 不包含在 Masonry 中，因此您应该使用单独的 plugin .我建议使用已编译的 .min 版本。

关于堆叠图像的问题:问题不在 imagesLoaded 中，也不在 Masonry 中。 在您的代码中， imagesLoaded 正在等待所有图像加载完毕，然后触发砌体。加载所有图像后，Masonry 插件可以正确定义它们的大小并放在网格上。在此之前，浏览器像往常一样加载图像并根据定义的 CSS 显示它们，这就是它们困惑的原因。

一种可能的解决方案是默认隐藏元素，然后在 imagesLoaded 确认图像加载时淡入:

$(document).ready(function() {

  var $boxes = $('.box');
  $boxes.hide();

  var $container = $('#post-area');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();

    $container.masonry({
        itemSelector : '.box',
        columnwidth: 300,
        gutter: 20,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});