Отложенная загрузка изображений при горизонтальном скролле
Всем привет! Вопрос про отложенную загрузку изображений. Использую код
$(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"> Подскажите, пожалуйста, как реализовать. |
<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>
вот самый простой способ |
Спасибо! Помогло
|
| Часовой пояс GMT +3, время: 09:22. |