Я хочу просмотреть все изображения в моей строке и, если они попадают в область просмотра, я хочу вызвать функцию (отложенная загрузка изображений).
HTML:
<div v-html="post.content"></div>
JS
mounted: function() {
let parser = new DOMParser()
let doc = parser.parseFromString(this.post.content, 'text/html')
let lazyImages = [].slice.call(doc.querySelectorAll('img'))
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
lazyImage.srcset = lazyImage.dataset.srcset
lazyImage.classList.remove('lazy')
lazyImageObserver.unobserve(lazyImage)
}
})
})
lazyImages.forEach(function (lazyImage) {
lazyImageObserver.observe(lazyImage)
})
} else {
// Possibly fall back to a more compatible method here
}
}
Проблема заключается в том, что IntersectionObserver никогда не запускает элемент изображения даже при прокрутке / прохождении над ним и т.д.