结合LazyLoad和Jquery Masonry [英] Combining LazyLoad and Jquery Masonry

问题描述

我一直试图将lazyload砌筑和moo工具拼凑在一起，但是它们似乎并没有很好地融合在一起，尽管可能只是因为我在编码方面有点没用！

I have been trying to piece together masonry and moo tools lazyload however they both dont seem to go very well together although it possibly could just be because I am slightly useless at coding!

该砌体可在此页面上使用.

但是，当我尝试将其与lazyload放在一起时，它似乎完全混乱了.有谁知道如何一起实现这两个插件?

However when I try to put it together with lazyload it seems to totally mess up. Does anyone have any idea how to implement both plugins together?

我花了6天的时间来解决这个问题，这是我最后的希望哈！

I have spent 6 days trying to figure it out and this is my final hope ha!

谢谢

推荐答案

最近，我要为我的一个网站解决此问题.我尝试了几种方法，它似乎有效.

Recently, I gotta solve this for one of my website. I have tried a couple of ways and it seems working.

1.第一种方法:

• 在物件上砌砖
• 在所有图像上放置一个占位符，并在它们上使用lazyload
• 现在，当每个图像触发lazyload.load回调时，重新加载砌体->一系列砌体('reload') [使用新图像更新了jsfiddle，更易于说明这一点]

• Load masonry on the items
• Put a place holder on all images and use lazyload on them
• Now, when each image fire lazyload.load callback, reload masonry -> a series of masonry('reload') [Updated jsfiddle with new images, easier to illustrate the point]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').addClass('not-loaded');
    $('.item img.not-loaded').lazyload({
        effect: 'fadeIn',
        load: function() {
            // Disable trigger on this image
            $(this).removeClass("not-loaded");
            $container.masonry('reload');
        }
    });
    $('.item img.not-loaded').trigger('scroll');
});

此方法不错，但有一个缺点.网格布局可能不会保持相同，因为masonry.reload()的时间取决于每个图像的加载时间(即应该首先加载的图像可能只会在以后完成)

This method is good, but it has one disadvantage. The grid layout might not be kept the same since the time of masonry.reload() depends on each image's load time (i.e. the one supposed to be loaded first might only finish later)

2.第二种方法: 我想看看像pinterest这样的网站，它不遵循第一种方法，因为它们甚至在加载任何图像之前就已经安排了容器盒，因此，我试图实现的是只显示与图像比率相同的盒子.这些步骤是:

2. Second Method: Look at sites like pinterest, i think, it does not follow the first method, because they have the container boxes arranged even before any image loaded, therefore, what I tried to achieve is to display just the boxes with same ratio as the images. The steps are:

• 传递您的图片尺寸(仅返回{image1: [300,400],image2: [400,500]}之类的json)
• 使用CSS技巧来调整div框的大小 根据容器.我在此处
• 像往常一样，延迟加载，从现在开始，无需触发任何重新加载，就没有映像了， 盒子排列正确

• Pass your images dimension (just return a json like {image1: [300,400],image2: [400,500]} )
• Use CSS trick to make div box resize according to container. I found that trick here
• Lazy load like normal, no need to trigger any reload since now, without the image, the boxes are alr arranged correctly

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').lazyload({
        effect: 'fadeIn'
    });
    $('.item img').trigger('scroll');
});

[已编辑，为第二种方法添加了jsfiddle]

注意:

• 在这个小提琴中，我手动在"padding-bottom:xxx％"中输入每个图像的高度/宽度比，这应该从您的服务器代码中传入(请参阅步骤1)
• 添加边框以使框可见
• 为说明即使未加载图像时也将整理框，请尝试取消注释/*display: none */并为#container.fluid .item img注释display: block

• In this fiddle, I manually put in the height/width ratio of each image in 'padding-bottom: xxx%' which should be passed in from your server code (refer to step 1)
• Added in a border to make boxes visible
• To illustrate that the boxes will be arranged even when the images not loaded, try uncomment /*display: none */ and comment display: block for #container.fluid .item img

欢呼

这篇关于结合LazyLoad和Jquery Masonry的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！