7

在我暴露我的问题之前要记住两件事：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 脚本。事情似乎只是稍微好一点，但我仍然无法以正确的方式显示出现在首屏下方的图像。基本上任何加载到视口中的东西都会被同位素很好地分类，但剩余的图像不会根据它们的实际、最终、可见尺寸添加。我需要在 Isotope 中触发某些东西，以使其在加载新项目后重新排列它们。我不知道这是否可能。有人可以帮忙吗？这是您可以看到正在发生的事情的网站：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>

它不是超级顺利，但它可以完成工作。

以前我尝试过一些类似的东西：

<script>
$(function () {

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

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

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

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

无法在初始化之前调用同位素上的方法；试图调用方法“reLayout”

所以我不知道。

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

4

3 回答 3

6

嘘！我认为我们有一个最终的赢家。我修补了一些我找到的半解决方案——通过反复试验，请注意，因为我仍然不知道我在做什么——我想我终于做对了。控制台不再返回初始化错误，并且代码的行为似乎或多或少正确（我认为？！）。

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

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

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

所以'reLayout'不会在滚动时发生，但是当图像加载时，如果滚动没有完全通过，它们就不会卡住。

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

于 2013-02-17T23:51:39.217 回答
3

我对响应式网格有同样的问题。检查这张图片，左边的网格没问题，右边的网格坏了。

在此处输入图像描述

网格被破坏是因为需要图像的特定高度，并且响应过程将高度值传递给“自动”。

所以在这里我们必须在加载图像时重新布局（给出特定的高度来处理）。

现在我找到的解决方案是在 scrool 上重新布局：

$(window).scroll(function() {
        $container.isotope('reLayout');
});

但我确信有更好的方法来做到这一点。

并尝试使用 freetile 的网格，发现它比其他的更好更轻。 http://yconst.com/web/freetile/

于 2013-02-17T20:24:08.123 回答
0

虽然我遇到了同样的问题并且无法解决，但我意识到这只是一个警告。所以我只是通过在文件“jquery.isotope.min.js”（或 jquery.isotope.js）中注释掉控制台日志行来禁用它

var logError = function( message ) {
  if ( window.console ) {
    //window.console.error( message );
  }
};
于 2013-08-21T15:02:35.460 回答