Блог

Я реализовал Intersection Observer на своем сайте WordPress, который находится в режиме разработки, и только последнее изображение внизу сайта загружается лениво.

Не уверен, почему это происходит. Смотрите ниже мой ленивый код.

  /*Lazy load images*/
 const allViews = document.querySelectorAll("[data-src]");

 function preloadImage(img) {
   const src = img.getAttribute("data-src");
     if (!src) {
      return;
 }
  img.src = src;
 }
 const options = {
  root: null,
  threshold: 0,
  rootMargin: "0px",
 };

const callback = function (entries) {
//console.log(entries);
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
     if (!entry.isIntersecting) {
       return;
  } else {
  console.log(entry.target);
  preloadImage(entry.target);
  observer.unobserve(entry.target);
     }
   });
 }, options);

 allViews.forEach((image) => {
 observer.observe(image);
 });
 

В другом файле у меня есть скрипт jquery, добавляющий атрибут data-src ко всем изображениям и добавляющий класс lazyload:

   /*change img src to img data-src for lazy load*/
  $("img").each(function () {
    $(this).attr("data-src", $(this).attr("src"));
    $(this).addClass('lazyload');
    //$(this).removeAttr("src");
    //console.log($(this)[0].outerHTML);
});
 

Любая помощь будет отличной.

Я все еще не понимаю, почему вы на самом деле используете этот метод, потому что wordpress уже имеет встроенную поддержку loading =»lazy»

1. Javascript может выполняться в том порядке, в котором он загружен, если код Jquery не загружен до кода IntersectionObserver, ваш скрипт станет бесполезным.
2. у вас есть комментарий //$(this).removeAttr(«src»); это означает, что атрибут src все еще существует, и изображение будет загружено нормально. Вы должны раскомментировать его.
3. Вместо того, чтобы тратить время на разработку lazyload, вы могли бы просто оставить wordpress для выполнения его изначально отложенной загрузки или использовать плагины, такие как W3 Total Cache, который имеет встроенную поддержку отложенной загрузки.