Javascript (target.className) 如果元素有多个类名

Question

我的 Javascript 代码有问题，我希望有人能帮我解决这个问题。

我为图像创建了延迟加载功能。

<script type="text/javascript">
let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.75
};

let callback = (entries, observer) => {
  entries.forEach(entry => {
    if(entry.isIntersecting && entry.target.className === 'lazy'){
      let imageUrl = entry.target.getAttribute("data-src");
      if(imageUrl){
        entry.target.src = imageUrl;
      }
    }
  });
}

let observer = new IntersectionObserver(callback, options);

lazy = document.querySelectorAll("img.lazy");
for(i=0; i < lazy.length; i++){
  observer.observe(lazy[i]);  
}
</script>

适用于此元素

<img data-src="https://www.example.com/image.jpg" src="" class="lazy"/>

不适用于此元素

<img data-src="https://www.example.com/image.jpg" src="" class="test lazy"/>

这两个元素之间的区别是有一个额外的 class test

如何解决我的 Javascript 代码中的这个问题？

Answer 1

使用entry.target.classList.contains('lazy')代替entry.target.className === 'lazy'

Javascript (target.className) 如果元素有多个类名

Javascript (target.className) if element has multiple classnames

javascript

lazy-evaluation