IntersectionObserver с Vue (Nuxt) - PullRequest
       6

IntersectionObserver с Vue (Nuxt)

0 голосов
/ 03 января 2019

Я хочу просмотреть все изображения в моей строке и, если они попадают в область просмотра, я хочу вызвать функцию (отложенная загрузка изображений).

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 никогда не запускает элемент изображения даже при прокрутке / прохождении над ним и т.д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...