Estoy usando un observador de intersección para implementar la carga diferida en mis imágenes. Si solo selecciono una imagen con querySelector, entonces funciona. Pero por alguna razón no puedo hacer que querySelectorAll funcione. También probé getElementsByClassName y todavía no funciona. ¿Alguna solución?

 html: <section class="section" id="section--2"> <div class="photo__container--two"> <img data-src="portrait/4-vertical.JPG" alt="" class="fade-in img-vertical-lazy" /> <img data-src="portrait/5-vertical.JPG" alt="" class="fade-in img-vertical-lazy" /> <img data-src="portrait/6-vertical.JPG" alt="" class="fade-in img-vertical-lazy" /> </div> </section> JavaScript: const lazyImages = document.querySelectorAll('.img-vertical-lazy'); const lazyLoading = new IntersectionObserver((entries) => { entries.forEach(entry => { if (!entry.isIntersecting) return; entry.target.src = entry.target.getAttribute('data-src'); lazyLoading.unobserve(entry.target) }); }); lazyLoading.observe(lazyImages);