首页 问答 正文

如何为wordpress主题添加图片懒加载功能?

注册会员 / 悠然自学 / 2023-07-11/ 浏览 129 次

为WordPress主题添加图片懒加载功能可以通过以下步骤实现:

  1. 在主题的functions.php文件中添加以下代码:
function add_lazyload_script() {
    echo "<script>
        var lazyLoadInstance = new LazyLoad({
            elements_selector: '.lazy'
        });
    </script>";
}
add_action( 'wp_footer', 'add_lazyload_script', 9999 ); 
  1. 在需要懒加载的图片标签中添加class为"lazy",如:
<img class="lazy" src="placeholder.jpg" data-src="image.jpg" alt="Image" /> 

请注意,上述示例代码中的"placeholder.jpg"为占位图的路径,"image.jpg"为实际图片的路径。你需要根据实际情况替换这些路径。

此外,你还需要确保已经引入了LazyLoad.js的库文件。可以通过CDN链接或将库文件下载并放置在主题目录中。

这样,你的WordPress主题就添加了图片懒加载功能。

大家谈论
    我的见解