同位素+ Lazyload:图像大小

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了解一个工作示例.