延迟加载不适用于图像滑块插件（WordPress、PHP、JavaScript）

Question

如果能对我的惰性加载脚本有所帮助，我将不胜感激。出于我无法理解的原因，插件主滑块中的图像不会延迟加载。

我的JavaScript搜索具有data-src属性的所有图像。如果图像具有该属性，则将其与常规的src属性交换，并加载图像。如果不存在data-src，图像将被单独保留。

在此之前，我打算使用一个PHP脚本来获取所有图像，并将src与data-src交换，因此图像无法随页面加载。

它适用于除图像滑块以外的所有内容。它是通过插件Master Slider实现的。

我认为问题应该出在PHP中，因为滑块确实加载了—只是不是惰性加载。所有src属性都起作用，这意味着JavaScript不使用滑块。

有人知道这是为什么吗？

PHP：

add_filter( 'the_content', 'my_lazyload_content_images' );
add_filter( 'widget_text', 'my_lazyload_content_images' );
add_filter( 'wp_get_attachment_image_attributes', 'my_lazyload_attachments', 10, 2 );

// Replace the image attributes in Post/Page Content
function my_lazyload_content_images( $content ) {

  //-- Change src/srcset to data attributes.
  $content = preg_replace( '/(<img.+)(src)/Ui', '$1data-$2', $content );
  $content = preg_replace( '/(<img.+)(srcset)/Ui', '$1data-$2', $content );

  //-- Add .lazy-load class to each image that already has a class.
  $content = preg_replace('/<img(.*?)class=\"(.*?)\"(.*?)>/i', '<img$1class="$2 lazy-load"$3>', $content);

  //-- Add .lazy-load class to each image that doesn't already have a class.
  $content = preg_replace('/<img((.(?!class=))*)\/?>/i', '<img class="lazy-load"$1>', $content);

  return $content;
}

// Replace the image attributes in Post Listing, Related Posts, etc.
function my_lazyload_attachments( $atts, $attachment ) {
  $atts['data-src'] = $atts['src'];
  unset( $atts['src'] );
  
  if( isset( $atts['srcset'] ) ) {
    $atts['data-srcset'] = $atts['srcset'];
    unset( $atts['srcset'] );
  }

  return $atts;
}

JavaScript：

let lazyImgs = document.querySelectorAll("img[data-src]");

function lazyLoad(lazyImgs) {
  const imgOptions = {
    threshold: 0.25,
    rootMargin: "0%",
  };

  const imgObserver = new IntersectionObserver((entries, imgObserver) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        // get currently intersecting picture element and its children (source, img)
        let lazyImage = entry.target;

        // check if the element really has the attribute data-src, which we're using for lazy loading
        // if it doesn't leave the image alone
        if (lazyImage.hasAttribute("data-src")) {
          // exchange the src
          lazyImage.src = lazyImage.dataset.src;

          // also exchange the src, if the image has one
          if (lazyImage.srcset) {
            lazyImage.srcset = lazyImage.dataset.srcset;
          }
        } else {
          return false;
        }

        lazyImage.classList.add('is-loaded');

        // end observation of image once it's loaded :)
        imgObserver.unobserve(lazyImage);
      } // end is intersecting
    });
  }, imgOptions);

  // loop through all images and observe every single one
  lazyImgs.forEach((lazyImg) => {
    imgObserver.observe(lazyImg);
  });
} // end lazyLoad();

lazyLoad(lazyImgs);


And the CSS: 

.lazy-load {
  transition: opacity .15s;
  opacity: 0;
}

.lazy-load.is-loaded {
  opacity: 1;
}




Answer 1

为什么不使用默认的html5延迟加载？

<img src="_path_to_image_" loading="lazy">

https://web.dev/native-lazy-loading/