wordpress实现懒加载Lazyload的代码

网站加载速度一直是非常重要的话题。通过实际测试发现，提高网站加载速度能在短时间内显著提升页面访问量，尤其对大型网站而言，性能优化所带来的效益非常明显。

在对网站进行性能优化时，除了避免不必要的功能和代码外，实现图片和视频的懒加载也是非常有效的方式之一。

WordPress 平台有许多插件可以实现懒加载，但有时会因为加载第三方文件而反而降低页面加载速度。那么，有没有办法仅通过代码来实现懒加载效果呢?

原理剖析

懒加载的基本原理是通过 JavaScript 来控制页面上的图片加载时机。当图片还未进入浏览器可见区域时，不加载图片资源；当图片滚动进入可见区域后，才通过 JS 加载图片。这种方式可以避免加载不可见区域的图片，自然可以提高页面的加载速度。

具体实现

我们先看一下 img 标签默认的图片加载方式：

<img src="https://xsgc.cc/image.jpg" alt="wordpress 实现懒加载 Lazyload 的代码">

img 标签的 src 属性指定图片的地址，浏览器根据该地址加载图片。

为实现懒加载,我们可以在图片进入可见区域后再设置 src 属性，让浏览器只加载可见图片：

• 在图片未进入可见区域时，不加载图片，使用一个小的占位图：

<img src="https://example.com/placeholder.png" alt="wordpress 实现懒加载 Lazyload 的代码">

这里的 placeholder.png 是 1 像素的小图，所有的 img 标签共用该文件，以减少下载量。又由于占位图很小，需要设置 img 的宽高：

<img src="https://xsgc.cc/placeholder.png" alt="wordpress 实现懒加载 Lazyload 的代码" width="372" height="162">

• 当图片进入可见区域时，设置 src 加载真实图片。但浏览器并不知道该加载哪张图片，所以我们提前将图片地址存储在 data-src 属性中：

<img data-src="https://xsgc.cc/image.jpg" alt="wordpress 实现懒加载 Lazyload 的代码" src="https://example.com/placeholder.png" alt="wordpress 实现懒加载 Lazyload 的代码" width="372" height="162">

同时添加 class 属性，方便 JavaScript 获取 dom 并替换 src：

<img class="lazyload" data-src="https://xsgc.cc/image.jpg" alt="wordpress 实现懒加载 Lazyload 的代码" src="https://xsgc.cc/placeholder.png" alt="wordpress 实现懒加载 Lazyload 的代码" width="372" height="162">

• 图片端改造完成后，在 WordPress 主题 functions.php 中添加如下代码，即可实现全站懒加载：

function lazyload() { 
?>

<script>
const imgs = document.querySelectorAll('img.lazyload');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      let imgSrc = entry.target.dataset.src;
      entry.target.src = imgSrc;
      observer.unobserve(entry.target);
    }
  }); 
});

imgs.forEach(img => {
  observer.observe(img); 
});
</script>

<?php
}

add_action('wp_footer', 'lazyload');

通过以上简单的代码实现，就可以轻松为 WordPress 网站添加图片懒加载功能，从而提高页面加载速度。