Масонство + LazyLoad - Наложение изображений

Question

Я использую base Mansory layout для построения базовой сетки изображений. Чтобы загрузить сотни или тысячи изображений из базы данных в надежде создать бесконечную страницу прокрутки, я не хочу, чтобы пользователь загружал все из них, в основном из-за времени загрузки, а также из-за всего траты впустую, будет означать (пользователь не должен загружать изображение # 500, если он не прокрутится вниз, пока не достигнет его). Чтобы это произошло, я попытался использовать плагин jQuery LazyLoad .

Это, как я заполняю свою сетку Кладка изображения:

  <ul class="grid effect-3" id="grid"> 
      <?php 
      for ($i = 0; $i < count($thumbArray); $i++) { 
       if ($i < 9) { 
        echo '<li><img class="img-grid" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" src="' . $thumbArray[$i] . '"></li>'; 
       } else { 
        echo '<li><img class="img-grid lazy" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" data-original="' . $thumbArray[$i] . '"></li>'; 
       } 

      } 
      ?> 
     </ul> 

В основном загружаются первые 9 изображений заранее, и добавление «ленивый» класс CSS к другим, а также заменить атрибут «Src» с «исходными данными» Lazyload.

(вы можете заметить атрибуты «alt» и «data-fullsize», я использую их для системы лайтбоксов, и вы можете игнорировать их для целей этого вопроса).

В конце сценария index.php у меня есть:

<script src="js/jquery.lazyload.js"></script> 
<script>$("img.lazy").lazyload();</script> 

Импорт плагин и применить его к Img тегов с классом .lazy.

Проблема заключается в том, что, я полагаю, потому что не зная высоту изображений, система Кладка сетки накладками любые изображения, которые загружаются в процессе LazyLoad:

Как вам можно увидеть, после 9-го изображения (когда начинается спецификация lazyload) изображения начинают накладываться друг на друга. Я полагаю, это связано с тем, что позиции изображения динамически вычисляются с помощью Javascript, поскольку все они имеют положение: абсолютные и верхние и левые атрибуты установлены, но я не уверен.

Рассматривая сайт масонства, первый FAQ item связан с этим и рекомендует использовать imagesLoaded, который я пытался сделать, но безуспешно.

• Я попытался вычислить высоту изображений с помощью PHP getimagesize() и установить его как атрибут встроенного стиля, но он слишком интенсивный на сервере и занимает слишком много времени для загрузки.
• Я также попытался добавить элементы динамически, когда достигнут конец страницы (выбор элементов db через XHR будет простым решением), но я не был успешным - возможно, мне нужно было бы использовать функцию добавления Masonry для этого?

Подводя итог, я пытался найти решение в течение нескольких дней, просматривая подобные темы и применяя несколько решений, но безрезультатно. Система сетки масонства указана для моих целей, потому что размеры изображения могут отличаться (например, я не хочу пробела после каждого вертикального изображения), но я действительно нахожу, что он беспокоится о том, чтобы связать его с Lazyload, и без этого пользователи просто будут испытывать гораздо больше, чем необходимое время загрузки, и сервер будет испытывать излишнюю нагрузку.

Решения для изображений, которые не накладываются, пожалуйста? Спасибо заранее (y)

Answer 1

Большинство плагинов кладки включают метод relayout, который можно вызвать сразу после добавления новых элементов, чтобы заставить полную relayout пунктов. В вашем случае вам нужно только вызвать .masonry ('layout'); где «макет» - это имя вашего экземпляра кладки. Вам нужно будет вызвать это сразу после добавления элементов в свою сетку. Это должно регулировать все ваши интервалы между изображениями для вас. Кроме того, вы захотите использовать метод addItems() для добавления элементов во время прокрутки. Если вы попытаетесь добавить их вручную, они не будут добавлены в массив масонства, и вы не сможете применить к ним макет.

Answer 2

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

$(window).on('load', function(){ 
    code here. 
}