LazyLoad пользовательский CSS Masonry Grid - PullRequest
Новая
       107

LazyLoad пользовательский CSS Masonry Grid

0 голосов
/ 09 мая 2019

Я создал очень простую сетку CSS с 3 столбцами и отображаю изображения в этих столбцах. Изображения устанавливаются в data-src, так как я пытаюсь их лениво загрузить.

Я пытаюсь использовать файл lazyload.js здесь:

https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js

Я рад изменить файл lazyload JS, если мне нужно использовать diff.

У меня есть 2 проблемы: во-первых, когда изображения загружаются, они «прыгают», загружая изображение и перетасовывая остальные. (на моем живом сайте, похоже, не происходит на Codepen).

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

Для первого вопроса: я подозреваю, что мне нужно установить какой-то заполнитель, чтобы убедиться, что изображение сразу «помещается» в сетку, даже если оно загружается только при прокрутке через data-src. Я попытался добавить blank.gif в src и установить ширину / высоту изображения в теге img. Это не похоже на работу.

Во-вторых: я не могу понять, почему это не работает.

Вот мой кодовый блок: 


<div class="gallery-holder">
   <section id="photos">
   <img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2019/02/home-heaer.jpg" height="1000" width="1500">

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2018/02/contact.jpg" height="600" width="1900" >

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2017/03/IMG_2336-1.jpg" height="2056" width="3088" >

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2018/02/IMG_2299.jpg" height="2056" width="3088">

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2018/02/rafters.jpg" height="545" width="1900" >

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2018/02/retail1.jpg" height="410" width="795">

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2018/02/retail4.jpg" height="410" width="795" >

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2018/02/wwr_retail.jpg" height="410" width="795">

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2017/03/lower_pigeon.jpg" height="410" width="795">

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2017/03/upper_pigeon.jpg" height="410" width="795">

<img src="blank.gif" class="lazy" data-src="https://smokymtnriverrat.com/rafting/wp-content/uploads/sites/3/2017/03/extreme_upper.jpg" height="410" width="795">

  </section>
</div>

<style>
#photos {
   /* Prevent vertical gaps */
   line-height: 30px;

   -webkit-column-count: 3;
   -webkit-column-gap:   10px;
   -moz-column-count:    3;
   -moz-column-gap:      10px;
   column-count:         3;
   column-gap:           10px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}
.gallery-holder {
    display: block;
    width: 90%;
    margin: 0 auto;
}

@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}

@media (max-width: 400px) {
.gallery-holder { 
    width:100%;
    padding:0 20px;
}
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
</style>

<script type="text/javascript">
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy"
// ... more custom settings?
});
</script>

https://codepen.io/anon/pen/XwXRBG

...