jquery - 同位素 + 延迟加载 : image size

Question

在揭露我的问题之前要记住两件事: 1.我不是程序员，因此我不知道自己在做什么 2. 像我是个傻子一样跟我说话，并且要非常非常耐心(见 1.)

好吧，网站的设置方式大约有一百万处错误，但现在我只是想让 Isotope 与 Lazyload 一起工作。我可能已经阅读了有关该问题的所有 stackoverflow，但到目前为止我还无法解决我的问题。 我使用 Stacey 作为 CMS。基本上，我想要实现的目标类似于 xxx.aestheticallyloyal.com(或者实际上是 www.imageworkshop.com/lazyload-portfolio)，但具有可点击的缩略图，排列为同位素/砌体风格，可在各自的项目页面中打开。 我尝试让 Infinitescroll 工作，但我不完全确定 Stacey 支持分页，因此我放弃了。输入延迟加载。

我让同位素工作得很好。我可以让 Lazyload 单独正常工作。但每当我尝试将两者混合时，我都会惨遭失败。问题是图像在完全加载之前是由同位素组织的，因此它们不会根据实际大小(可变的)对齐，而是获得固定的宽度和高度(我可以使用固定宽度，这就是重点，但高度应该相应缩放)。不过，如果我在此之后调整窗口大小，网格也会相应地调整，正如它应该的那样。

这是我正在使用的代码:

    <script>
$(function () {
    var $window = $(window);
    var $container = $('#container');
    var $imgs = $("img.lazy");

    $imgs.lazyload({
        event: 'scroll',
        effect: 'fadeIn',
        failure_limit: Math.max($imgs.length - 1, 0),
        appear: function () {}
    });

    $(function () {
        $container.imagesLoaded(function () {
            $container.isotope({
                onLayout: function () {
                    $window.trigger("scroll");
                },
                itemSelector: '.photo'
            });
        });
    });

    $window.load(function () {
        $container.isotope('reLayout');
    });
});
    </script>

这可能在很多方面都是错误的......我不知道。另外，我认为 reLayout 绝对没有做任何事情，而且从那里我真的不知道该去哪里。有人可以看看我的网站 flow.blukaet.com 并让我知道如何解决这个困惑的问题吗？ (别介意左边的菜单，我什至还没有开始看它)。 谢谢。

更新#1

我一直在尝试使用名为 Fasterize 的不同 Lazyload 脚本。事情似乎只是稍微好一点，但我仍然无法以正确的方式显示出现在首屏下方的图像。基本上，视口(viewport)中加载的所有内容都会按同位素进行良好排序，但其余图像不会根据其实际的、最终的、可见的大小进行添加。我需要触发同位素中的某些内容，使其在加载新项目后重新排列它们。我不知道这是否可能。有人可以帮忙吗？ 您可以在以下网站上查看正在发生的情况:flow.blukaet.com (上面的代码不再实际)。

更新#2

因此，由于下面提供的答案，这是修改后的代码(此外，这是使用 fastize/lazyload 而不是 appelsiini 的lazyload):

<script>
$(window).load(function () {

var $container = $('#container');
var $imgs = $("img");

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.photo'
    });
});

$(window).scroll(function () {
    $container.isotope('reLayout');
});
});
</script>

这不是 super 顺利，但它可以完成工作。

之前我尝试过以下内容:

<script>
$(function () {

var $container = $('#container');
var $imgs = $("img");

$container.imagesLoaded(function () {
    $container.isotope({
        itemSelector: '.photo'
    });
});

$imgs.load(function () {
    $container.isotope('reLayout');
});
});
</script>

实际上运行得更流畅，但不知何故给出了以下控制台错误:

cannot call methods on isotope prior to initialization; attempted to call method 'reLayout'

所以我不知道。

另一件事需要注意的是该代码可以在 FF 和 Opera 中运行。显然 Safari 完全忽略了延迟加载。我还没有在 Chrome 和 IE 中测试过。如果有人想查看:flow.blukaet.com

Answer 1

万岁!我想我们已经有了最后的胜利者。我对我发现的半解决方案进行了更多修改——请注意，通过反复试验，因为我仍然不知道自己在做什么——我想我终于做对了。 控制台不再返回初始化错误，并且代码的行为似乎或多或少正确(我认为？!)。

<script>
$(document).ready(function () {

    var $container = $('#container');
    var $imgs = $("img");

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.photo'
        });
        $imgs.load(function () {
            $container.isotope('reLayout');
        }); 
    });
});
</script>

因此“重新布局”不会在滚动时发生，但当图像加载时，这样如果滚动没有完全完成，它们就不会被卡住。

在 Safari 中 Lazyload 仍然为所欲为，并且像往常一样我无法在 Chrome 和 IE 上进行测试，但在 FF 和 Opera 中似乎没问题。检查 flow.blukaet.com 以获取工作示例。