Question

在我暴露问题之前要记住两件事： 1.我不是程序员，因此我对我正在做的事情没有任何想法 2.跟我说话，好像我很傻，而且非常耐心（见1.）

好吧，网站设置的方式有一百万个错误，但是现在我只是想让Isotope与Lazyload一起工作。我可能已经阅读了关于这个问题的每一个stackoverflow，但到目前为止我还没能解决我的问题。我正在使用Stacey作为CMS。基本上，我想要实现的是类似于xxx.aestheticallyloyal.com（或实际上，www.imageworkshop.com/lazyload-portfolio），但可点击的缩略图排列同位素/砌体样式在各自的项目页面中打开。我尝试让Infinitescroll工作，但我并不确定Stacey支持分页，因此我放弃了。输入Lazyload。

我让Isotope工作正常。我可以让Lazyload工作得很好，分开。但每当我试图混合两者时，我都会悲惨地失败。问题是图像是由Isotope在完全加载之前组织的，因此它们不会根据它们的实际大小（可变）进行对齐，而是获得固定的宽度和高度（我可以使用固定宽度，这就是重点，但高度应相应缩放）。但是，如果我在此之后调整窗口大小，则应相应地调整网格。

这是我正在使用的代码：

    <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进行精细排序，但其余图像不会根据实际的最终可见大小进行添加。我需要在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

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>

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

在Safari中Lazyload仍然可以随心所欲，而且像往常一样我无法在Chrome和IE上进行测试，但在FF和Opera中似乎没问题。查看flow.blukaet.com了解一个工作示例。

Answer 2

我对响应式网格有同样的问题。检查此图像，左侧网格正常，右侧断开。

enter image description here

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

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

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

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

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

试试网格的自由，发现它比其他人更好，更轻。 http://yconst.com/web/freetile/

Answer 3

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

var logError = function( message ) {
  if ( window.console ) {
    //window.console.error( message );
  }
};

同位素+ Lazyload：图像大小

3 个答案: