主页/WordPress笔记/博客文章/综合文章/如何在 WordPress 中轻松延迟加载图片（2 种方法）

如何在 WordPress 中轻松延迟加载图片（2 种方法）

2,886字
12–18 分钟
in
Bug编译狮

Bug编译狮

在 WordPress 网站上，图片的加载速度对用户体验至关重要。特别是在移动端设备上，快速加载的图片可以显著提升用户满意度和搜索引擎排名。本文将介绍两种在 WordPress 中实现图片延迟加载的方法。

方法一：使用 wp_enqueue_scripts 动态添加图片缓存

首先，在您的主题的 functions.php 文件或一个自定义插件中，动态地添加图片缓存功能。这可以通过修改 WordPress 的默认行为来实现，以避免不必要的图像请求。

步骤 1: 添加 CSS 和 JavaScript 链接到页面

确保您的页面文件中包含了以下两行代码：

<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() . '/css/image-loader.css' ); ?>">
<script src="<?php echo esc_url( get_template_directory_uri() . '/js/image-loader.js' ); ?>"></script>

这些链接应放在 <head> 标签内，以便在页面渲染时立即加载。

步骤 2: 编写 JavaScript 进行图片加载管理

接下来，编写一段JavaScript代码来控制图片的加载策略。您可以在上述两个脚本文件中的任意位置插入这段代码：

(function($) {
    // 图片懒加载函数
    function lazyLoadImages() {
        $('.lazyload').each(function() {
            var img = $(this);
            img.attr('src', img.data('original'));
            img.one('load', function() {
                if (img.is(':visible')) {
                    img.fadeIn();
                }
            });
        });

        // 自动加载新加载的图片
        setInterval(lazyLoadImages, 500); // 每500毫秒检查一次新的图片
    }

    // 在 DOMContentLoaded 事件触发后执行此函数
    $(document).ready(function() {
        lazyLoadImages();
    });
})(jQuery);

以上代码会自动检测并加载所有具有 data-original 属性的图片，当它们完成加载时，它们会被隐藏并等待显示。如果页面首次加载后有新图片被加载，则会在 500 毫秒后重新运行此函数。

方法二：使用 CDN 提供的图片懒加载服务

另一种选择是利用像 Cloudflare 或 Fastly 这样的 CDN 提供的图片懒加载服务。这种方法不需要在服务器端进行任何更改，只需在网站的根目录下创建一个 .htaccess 文件，或者在子域名上配置相应的规则即可。

例如，如果您想使用 Cloudflare 提供的图片懒加载服务，您可以这样做：

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} ^.*$
RewriteRule (.*) http://cdn.example.com/$1 [P,L]
</IfModule>

<FilesMatch ".(jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=31536000"
</FilesMatch>

然后，确保在您的 WordPress 主题中使用 Cloudflare 的 CDN 相关设置。这通常意味着在 WordPress 设置 > CDN 中启用 Cloudflare 并配置好相关设置。

通过这两种方法之一，您可以在 WordPress 网站上有效地实现图片延迟加载，从而提高网页性能和用户的整体体验。

目录
黑板前的Bug语法讲师

黑板前的Bug语法讲师

如何在 WordPress 中轻松延迟加载图片

在WordPress网站上加载图片时，如果图片文件过大或需要较长时间下载，可能会导致用户体验不佳。为了提高加载速度并优化用户体验，可以使用两种方法来延迟加载图片：一种是通过自定义函数和插件实现，另一种是在主题级别设置。下面分别介绍这两种方法。

方法一：使用自定义函数和插件

  1. 自定义函数

    使用自定义函数可以让你根据特定条件控制图片是否加载。以下是一些关键步骤：

    • 在WordPress安装目录下的functions.php文件中添加自定义函数：

      add_action('wp_head', 'delay_image_load');
function delay_image_load() {
 global $post;
 if ($post->ID > 0) {
     // 延迟加载图片的逻辑
     wp_enqueue_style( 'my-custom-style' );
     wp_enqueue_script( 'my-custom-script' );
 }
}

    • 确保你的自定义函数正确运行，可以通过检查wp_head()输出中的图片加载状态来验证。

    • 需要注意的是，自定义函数可能会引入一些安全风险，因此在实际部署时应谨慎使用。

  2. 插件支持

    对于更简单的方法，可以考虑使用WordPress自带的插件如WP Lazy Load等。这些插件可以帮助你在页面加载完成后自动显示图片，同时还可以提供多种加载效果供选择。

  3. 测试与优化

    在将自定义函数或插件应用于生产环境之前，确保对它们进行全面测试以确保性能和安全性。此外，持续监控加载速度，及时调整策略以达到最佳效果。

方法二：在主题级别设置

  1. 使用 CSS 自定义属性

    如果你喜欢使用CSS来处理图片加载问题，可以在WordPress的主题样式表中加入自定义属性，例如lazyload、lazy-eager等，用于控制图片的懒加载行为。

    示例代码：

     /* lazyload */
 .lazy-load,
 .lazy-eager {
   opacity: 0; /* 设置初始透明度为 0 */
 }

 /* 加载完成后立即显示 */
 @media (min-width: 768px) {
   .lazy-load, .lazy-eager {
     opacity: 1; /* 显示图片 */
   }
 }

 /* 缓存图片 */
 .lazy-load.lazy-loaded {
   display: none; /* 显示缓存图片 */
 }

  2. 使用 JavaScript 和 jQuery

    另一个选项是利用JavaScript和jQuery库来实现图片的懒加载。这种方法更加灵活，可以根据不同的需求动态地控制图片的加载顺序。

    示例代码：

     <script>
   $(document).ready(function() {
     $('.lazy-load').each(function() {
       var $this = $(this);
       setTimeout(function() {
         $this.addClass('lazy-loaded'); // 设置已加载标志
       }, 500); // 设置延迟时间
     });
   });
 </script>

    这里需要注意的是，懒加载涉及到图像资源的预加载，这可能会影响网站的整体性能，特别是对于大图片集或者视频流媒体的内容。在实践中，需要权衡加载效率和用户体验之间的平衡。

以上就是两种在WordPress中实现图片延迟加载的方法。希望这对您有所帮助！

最新发布