Сочетание LazyLoad и JQuery Masonry

Question

Я пытаюсь скомпоновать инструменты кладки и moo lazyload, однако они оба не очень хорошо сочетаются вместе, хотя это возможно просто потому, что я немного бесполезен при кодировании!

Каменная кладка работает на this page.

Однако, когда я пытаюсь собрать его вместе с lazyload, кажется, что все испортилось. Кто-нибудь знает, как реализовать оба плагина вместе?

Я провел 6 дней, пытаясь понять это, и это моя последняя надежда ха!

Благодаря

Answer 1

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

Answer 2

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

1. Первый способ:

• нагрузки кладки на элементы
• Поместите держатель место на всех изображениях и использовать LazyLoad на них
• Теперь, когда каждое изображение огня lazyload.load обратного вызова , перегрузить кладку -> серия кладки («перегрузочной») [Обновлено 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. Второй метод: Посмотрите на такие сайты, как pinterest, я думаю, что это не соответствует первому методу, потому что у них есть контейнеры, размещенные даже перед загрузкой любого изображения, поэтому я попытался показать только те коробки с таким же соотношением, что и изображения. Шаги:

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

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

Приветствий

Answer 3

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

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 
     }); 
    }); 
}  

Answer 4

может быть кто-то будет иметь проблемы тоже надежда помощь.

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

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

а) использование LazyLoad данных оригинал = «ххх» атрибут для установки URL изображения. НЕ src. вам нужно разместить несколько заполнителей. может быть 1x1 пиксель, который будет загружен без lazyload.

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

расположить все пространство для будущего изображения вам нужно установить

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

только ширина = «ая» и высота = «ая» не хватает

так, что изображение заполнителя стал как:

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

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

Важна - Кладка ширина обновления его размер колонки, но не по высоте, так что если ваш размер столбца = 50px, то вам необходимо рассчитать Heigh из заполнителя

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); 

            } 
            } 
           }); 

        }); 

Answer 5

Ответ 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(); }); 

     } 
    }); 

});