WordPress 开发教程：在没有插件的情况下扩展延迟加载

延迟加载是一种优化技术，可延迟内容的下载和渲染，直到内容在屏幕上可见。延迟加载本质上会延迟图像的加载，直到用户在页面向下滚动（图像进入视图）时延迟加载是提高 WordPress 页面速度的好方法。延迟加载是一种阻止图像滚动直到我们滚动过去的方法。幸运的是，从 WordPress 5.5 开始，它内置了延迟加载功能。但它没有感官体验。本教程改进了内置的延迟加载功能，为用户提供直观的延迟加载图像动画。下面是分享的代码。

第1步：替换src属性

注意：WordPress 5.5及更高版本默认引入了本机延迟加载，通过为所有图像添加loading =“lazy”属性。因此您不再需要创建自己的。

在WordPress中我们可以通过过滤器并用正则表达式替换src或srcset：

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 ) {
  $content = preg_replace( '/(<img.+)(src)/Ui', '$1data-$2', $content );
  $content = preg_replace( '/(<img.+)(srcset)/Ui', '$1data-$2', $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;
}

第2步：添加滚动监听器当图像到达时，它应该将 data-src 替换为 src，以便图像开始加载。

( function() { 'use strict';
  let images = document.querySelectorAll('img[data-src]');
              
  document.addEventListener('DOMContentLoaded', onReady);
  function onReady() {
    // Show above-the-fold images first
    showImagesOnView();

    // scroll listener
    window.addEventListener( 'scroll', showImagesOnView, false );
  }
  
  // Show the image if reached on viewport
  function showImagesOnView( e ) {
    
    for( let i of images ) {
      if( i.getAttribute('src') ) { continue; } // SKIP if already displayed
      
      // Compare the position of image and scroll
      let bounding = i.getBoundingClientRect();
      let isOnView = bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
      
      if( isOnView ) {
        i.setAttribute( 'src', i.dataset.src );
        if( i.getAttribute('data-srcset') ) {
          i.setAttribute( 'srcset', i.dataset.srcset );
        }
      }
    }
  }
              
})();

第三步：添加CSS动画

img[data-src] {
  opacity: 0;
  transition: opacity .25s ease-in-out;
  will-change: opacity;
}

img[data-src][src] {
  opacity: 1;
}