const options = {
root: null,
rootMargin: '0px',
threshold: 0.05
};
const lazyload = function(entries, observer) {
entries.forEach(function(entry) {
const target = entry.target;
const dataset = target.dataset;
if (entry.isIntersecting) {
try {
if ('src' in dataset) {
target.src = dataset.src;
}
if ('bg' in dataset) {
target.style.backgroundImage = `url(${dataset.bg})`;
}
target.classList.add('lazyloaded');
observer.unobserve(target);
} catch (error) {
console.error(error);
}
}
});
};
const observer = new IntersectionObserver(lazyload, options);
document.querySelectorAll('.js-lazyload').forEach(elem => observer.observe(elem));
<!-- Изображение без плейсхолдера -->
<img class="js-lazyload" data-src="path/to/image/elephant.jpg" alt="The pink elephant">
<!-- Изображение с плейсхолдером -->
<img class="js-lazyload" data-src="path/to/image/elephant.jpg" src="path/to/placeholder.jpg" alt="The pink elephant">
<!-- Ситуация, когда изображение надо задать как фон -->
<div class="js-lazyload" data-bg="path/to/image/elephant.jpg"></div>
[class*="item-"] {...}
.selector {
transition: all .1s ease; // при отведении курсора
}
.selector:hover {
transition: all .1s ease; // при наведении курсора
}
margin: auto
используйте на элементе align-self: center
или на его родителе align-items: center
. Можно воспользоваться вспомогательными классами, которые уже есть в Bootstrap 4: .align-self-center или .align-items-center. $white: #fff;
$body-bg: $white;
$comment-container-bg: $white;
body {
background-color: $body-bg;
}
.comment-container {
background-color: $comment-container-bg;
}