Блог

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

Я сохранил некоторые элементы в переменной и хочу применить функцию наблюдателя к теме.

И я также печатаю каждый вывод в консоли.войдите, чтобы увидеть вещи.

Но возникает эта ошибка:

Неперехваченная ошибка типа: imgs.forEach не является функцией

Это мой код:

    const imgs = document.querySelector("[data-src]");

   const options = {
      threshold:1,
   };

   const observer = new IntersectionObserver((entries,observer) => {
    entries.forEach(entry => {
        let src = entry.target.getAttribute('data-src'); 
        if(!entry.isIntersecting){
            return;
        }
        entry.target.src=src;
        console.log(entry)
        observer.unobserve(entry.target);
    })

   },options)

   // Probleme is here
   imgs.forEach(img => {
    observer.observe(img);
   })
 

Попробуйте querySelectorAll использовать приведенный ниже код,

 const imgs = document.querySelectorAll("[data-src]");
 

as querySelector вернет один совпадающий элемент, но querySelectorAll вернет список узлов всех совпадающих элементов.

Вместо этого используйте querySelectorAll, который должен это исправить

Обратитесь к документации mdn

Метод Document querySelectorAll() возвращает статический (не текущий) NodeList, представляющий список элементов документа, которые соответствуют указанной группе селекторов.

вместо

    const imgs = document.querySelector("[data-src]");
 

попробуйте это

    const imgs = document.querySelectorAll("[data-src]");
 

Хотя для некоторых браузеров используется querySelectorAll(селектор).forEach() будет работать. Но это поддерживается не всеми браузерами. Таким образом, безопасный способ сделать это — использовать цикл for для перебора списка узлов. Итак, вы должны сделать что-то вроде этого,

 const imgs = document.querySelector("[data-src]");
// other coddes...
for(let i = 0; i<imgs.length; i  ) {
   // your code.
}
 

Я думаю, что это будет самый безопасный способ.

 Document.querySelector()
 

возвращает один элемент, и вы не можете перебирать один элемент.

 document.querySelectorAll()
 

возвращает все элементы с классом, идентификатором, тегом и т. Д., Указанными в круглых скобках.