Объединение LazyLoad и JQuery Masonry

Ответ 1

Недавно я должен решить это для одного из моих сайтов. Я попробовал несколько способов, и это похоже на работу.

1. Первый метод:

• Загрузите кладку на предметы
• Поместите заполнитель на все изображения и используйте для них lazyload
• Теперь, когда каждое изображение запускает обратный вызов lazyload.load, перезагрузите кладку → серию кладки ('reload') [Обновлен jsfiddle с новыми изображениями, чтобы проиллюстрировать смысл]

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() зависит от времени загрузки каждого изображения (т.е. то, которое должно быть загружено первым, может закончиться только позже)

2. Второй метод: Посмотрите на сайты, как на интерес, я думаю, это не следует первому методу, потому что у них есть контейнеры, расположенные еще до того, как загружено любое изображение, поэтому я пытался добиться только отображения коробок с таким же соотношением, как у изображений. Шаги:

• Передайте размер изображения (просто верните json, как {image1: [300,400],image2: [400,500]})
• Используйте трюк CSS, чтобы изменить размер блока div в соответствии с контейнером. Я нашел этот трюк здесь
• Ленивая загрузка, как обычно, нет необходимости запускать перезагрузку, так как теперь, без изображения, ящики расположены правильно

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 */ и прокомментировать display: block для #container.fluid .item img

ура

Ответ 2

Я отправил тот же ответ на статью, посвященную другим вопросам. Если у вас возникли проблемы с образами, я нашел решение на сайте ниже, хотя это на японском языке.

http://www.webdesignleaves.com/wp/jquery/1340/

Надеюсь, это поможет.

Точка использования следующая;

$('img.lazy').load(function(){ ... })

HTML

<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>  
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>  
</div><!-- end of .work_item-->
 ....
</div><!-- end of #works_list -->    

JQuery

$("img.lazy").lazyload({
    effect: 'fadeIn',
    effectspeed: 1000,
    threshold: 200
});

$('img.lazy').load(function() {
    masonry_update();
});

function masonry_update() {     
    var $works_list = $('#works_list');
    $works_list.imagesLoaded(function(){
        $works_list.masonry({
            itemSelector: '.work_item',　
            isFitWidth: true,　
            columnWidth: 160
        });
    });
 }    

Ответ 3

softk5 не работал на меня и заставлял замораживать большую часть браузера. Вот мой следующий код и его работа для меня.

jQuery(document).ready(function(){
    jQuery("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000,
        threshold: 200,
        load:function(){
            var $container = jQuery('.is_masonry');
            $container.masonry({
            }).imagesLoaded(function() {   $container.masonry();  });

        }
    });

});

Ответ 4

Причина в том, что масонство должно знать размеры изображения, чтобы правильно расставлять предметы. Однако LazyLoad задерживает загрузку изображения до тех пор, пока изображение не появится в окне просмотра, а это означает, что изображение не будет иметь размеров (или размеры изображения фиктивного/замещающего изображения будут установлены как img src).

Ответ 5

может быть, у кого-то тоже будут проблемы, надеюсь на помощь.

чтобы заставить его работать с wordpress photoswipe-masonry theme невозможно без модификации плагина.

next связан с этой модификацией и просто с кладкой

a) lazyload использовать атрибут data-original = "xxx" для установки URL-адреса изображения. НЕ src. вам нужно разместить несколько заполнителей. может быть 1x1 пиксель, который будет загружен без lazyload.

b) этот заполнитель должен покрыть ВСЕ пространство для будущего lazyloaded изображения, или каменная кладка сделает все изображения видимыми как lazyloading view. потому что перед загрузкой изображений он имеет нулевой размер 0px x 0px. и все изображения вставляются в видимую область перед загрузкой. Lazyload считает все видимым и загружает все.

чтобы упорядочить ВСЕ пространство для будущего изображения, которое вам нужно установить

стиль = "ширина: xxpx; высота: xxpx;"

just width = "xx" и height = "xx" недостаточно

поэтому место для изображения стало следующим:

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;">

затем примените ленивую нагрузку обычным способом и кладку. в любом порядке.

Важно - ширина обновления масонства до размера столбца, но не высота, поэтому, если ваш размер столбца = 50 пикселей, вам нужно вычислить высоту заполнителя

new_height = 50/actual_width * actual_height;

поэтому для темы wordpress нужна

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2];

.....

                    <img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/>

....

затем добавьте новые строки ниже кластеров init

        var reloading = false;
                    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){



                              \$('.msnry_item img').lazyload({
                                  effect: 'fadeIn',
                                  //container: container,
                                  threshold : 200,
                                  skip_invisible : false,
                                  failure_limit : 5,
                                  load: function() {
                                      if( ! reloading )
                                      {
                                         reloading = true;
                                         setTimeout(function(){ 
                                              container.masonry('reload');
                                              reloading = false;
                                         }, 500);

                                     }
                                  }
                              });

                    });

Ответ 6

Попробуйте повторно использовать масонство в "callback_loaded" в LazyLoad

var ll = new LazyLoad({
    elements_selector: "img[data-src]",
    callback_loaded() {
        masonry = new Masonry(grid, {
            itemSelector: '.img-selector',
        });
    }
});

Далее добавлен код ниже

callback_loaded() {
    masonry = new Masonry(grid, {
        itemSelector: '.img-selector',
    });
}