在WordPress网站优化中，图片延迟加载是提升页面加载速度的有效方法。虽然有很多插件可以实现这一功能，但使用插件会增加网站负担。本文将介绍如何在不使用插件的情况下实现延迟加载。

原生Lazy Loading实现方法

现代浏览器已经原生支持延迟加载功能，只需在img标签中添加loading="lazy"属性即可：

在WordPress中，可以通过修改主题的functions.php文件自动为所有图片添加此属性：

function add_lazy_loading_attr($content) {
    return str_replace('

JavaScript自定义实现方案

如果需要更精细的控制，可以使用原生JavaScript实现：

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = 【】.slice.call(document.querySelectorAll("img.lazy"));
    
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    }
});


使用时只需将图片的src属性改为data-src，并添加class="lazy"即可。

优化建议

    
为重要图片设置更高的加载优先级
    
合理设置占位符，避免布局偏移
    
测试不同浏览器的兼容性


通过以上方法，您可以在不使用插件的情况下有效实现WordPress网站的图片延迟加载，既提升了网站性能，又减少了插件依赖。