使用砌体与图片加载 [英] Using masonry with imagesloaded

问题描述

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

I'm a js newbie and hope this questions doesn't seem too stupid.

我为我的网站使用masonry - 工作正常。
我想让我的箱子出现，只是当masonry完成加载。在互联网上搜索我发现几个帖子，建议使用imagesloaded插件来解决这个问题。它只是不改变任何东西。这意味着：我的布局和内容框不断被混乱，直到砌体完成加载，只是那些盒子突然跳到他们正确的位置。

I'm using masonry for my site - works fine. I wanted to let my boxes appear just when masonry finished loading. Searching in the internet I found several posts recommending to use imagesloaded Plugin to solve this issue. It just doesn't change anything. That means: my layout and content boxes keep being messed up until masonry finished loading, just then the boxes suddenly jump to their right positions.

我的代码：

$(document).ready(function() {

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

我也得到这个firebug错误：

I'm also getting this firebug-error:

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

我在我的网站的末尾加载imagesloaded js如果图片已载入图片已载入任何资料，有人认为它不再包含 - 混淆）：

I'm loading the imagesloaded js like this at the end of my website (I couldn't find any information if imagesloaded is already included in masonry or not, some wrote that it's not included anymore - confusing):

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

如果有人能帮助我，我会很高兴。

I would be really happy if someone could help me. And tell me if imagesloaded is even the right plugin to solve this issue!

推荐答案

imagesLoaded不包含在Masonry中，所以你应该请使用单独的插件。我建议使用编译的.min版本。

imagesLoaded is not included in Masonry, so you should use separate plugin. I would recommend to use compiled .min version.

关于堆叠图像的问题：问题不是在imagesLoaded也不是Masonry。
在你的代码imagesLoaded正在等待，直到所有的图像加载，然后发射砖石。加载所有图像后，Masonry插件可以正确定义它们的大小并放在网格上。之前，浏览器通常加载图像，并根据定义的CSS显示em，这就是为什么他们被搞砸了。

Regarding your problem with stacked images: the problem is not in imagesLoaded neither Masonry. In your code imagesLoaded is waiting until all images loaded and then fires masonry. Having all images loaded, Masonry plugin can properly define their sizes and put on grid. Before that, browser loads images as usually and display 'em according to defined CSS, that's why they're messed up.

其中一个可能的解决方案是默认隐藏元素，然后fadein，而imagesLoaded确认，加载的图像：

One of the possible solution is to hide elements by default and then fadein while imagesLoaded confirm, that images loaded:

$(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
    });    
  });
});

这篇关于使用砌体与图片加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！