как использовать изотоп и ленивую загрузку вместе, чтобы создать фотогалерею? - PullRequest
Новая
       24

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

0 голосов
/ 20 июня 2019

Я хочу использовать lazy-load и isotope для создания фотогалереи.Я пробовал разные решения, которые предлагаются в stackoverflow, но ни одно из них не сработало, и у меня все еще есть проблема.у кого-нибудь есть идея?заранее благодарю за помощь.

вот мой последний код.в этом коде lazy-load не работает, и все изображения загружаются немедленно.

js: 

         $(window).load(function(){
    $('.grid').imagesLoaded(function(){
      $('.grid').isotope({
        itemSelector: '.grid-item',
        containerClass: 'isotope',
        layoutMode: 'masonry',
        percentPosition: true   
      });
    });
  });
  $(window).scroll(function(){
    $('.grid').isotope({
      itemSelector: '.grid-item',
      containerClass: 'isotope',
      layoutMode: 'masonry',
      percentPosition: true
    });
  });

  $(document).ready(function(){
    $('.grid-item img').lazyload({
      effect: 'fadeIn',
      threshold : 300
    });
  });

css и html: 

    .grid {
max-width: 69em;
list-style: none;
margin: 20px auto;
padding: 0;
    }
    .grid::after {
      content: "";
      clear: both;
      display: table;
    }
    .grid-sizer,
    .grid-item {
  display: block;
  padding: 7px;
    }
    @media (min-width: 530px) {
     .grid-sizer,
     .grid-item {
        float: right;
        width: 50%;
      }
    }
    @media (min-width: 960px) {
     .grid-sizer,
     .grid-item {
        width: 33%;
     }
    }

    <div class="grid">
      <div class="grid-sizer"></div>
      <div class="grid-item">
        <img src="assets/images/gallery/01.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/02.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/03.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/04.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/05.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/06.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/07.JPG"/>
      </div>
    </div>
...