Форум

Андрей812 · #1 (**permalink**) 25.01.2019, 14:39

Всем привет! Вопрос про отложенную загрузку изображений. Использую код

$(document).ready(function() {
  var lazyloadImages;    
    lazyloadImages = document.querySelectorAll(".lazyload");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      console.log(observer);
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazyload");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
})

<style>    
.picture {
	overflow-x: scroll;
}
</style>

<div class="picture">
<img class="lazyload" data-src="1.jpg" src="1.jpg">
<img class="lazyload" data-src="2.jpg" src="2.jpg">
</div>

- это загрузка изображений при вертикальном скролле.

Но вопрос как реализовать отложенную загрузку при ГОРИЗОНТАЛЬНОМ скролле в <div class="picture">

Подскажите, пожалуйста, как реализовать.

j0hnik · #2 (**permalink**) 25.01.2019, 17:48

<style>
    .picture {
      overflow-x: scroll;
      border: 1px solid red;
      width: 200px;
    }

    .wrap {
      width: 600px;
    }

    .picture img {
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="picture">
    <div class="wrap">
      <img data-src="1.jpg"><img data-src="2.jpg"><img data-src="3.jpg">
    </div>
  </div>

  <script>

    var picture = document.querySelector('.picture'),
      img = document.querySelectorAll('.picture img');

    function visible() {
      img.forEach(el => {
        if (!el.src && el.getBoundingClientRect().left - picture.offsetWidth < 0) el.src = el.dataset.src;
      });
    }
    visible();
    picture.onscroll = visible;
 </script>

вот самый простой способ

Андрей812 · #3 (**permalink**) 28.01.2019, 14:54

Спасибо! Помогло

Форум

Справочник

Discord чат

Курсы javascript