Wordpress站点particles.js粒子不显示，窗口调整后正常的修复咨询

这个问题我碰到过好多次了——particles.js初始化时没法正确获取容器的尺寸，或者脚本跑在DOM完全渲染之前，就会出现加载时不显示、调整窗口才出来的情况。给你几个靠谱的解决办法：

1. 确保脚本在DOM完全加载后初始化 #

最常见的原因就是particles.js的初始化代码在Hero容器还没渲染完成就执行了，导致它没法读取容器的宽高。你可以把初始化代码包裹在DOM加载完成的事件里：

原生JS写法： #

document.addEventListener('DOMContentLoaded', function() {
  // 替换成你的粒子配置和容器ID
  particlesJS('hero-particles', {
    particles: {
      number: { value: 80 },
      size: { value: 3 }
      // 其他配置项...
    }
  });
});

jQuery写法（如果你的主题用了jQuery）： #

jQuery(document).ready(function($) {
  particlesJS('hero-particles', {
    // 你的配置项
  });
});

2. 强制触发尺寸计算或手动设置容器尺寸 #

如果Hero容器是用视口高度（vh）、绝对定位或者动态计算的尺寸，页面加载时浏览器可能还没算出准确的容器大小。这时候可以手动设置尺寸，或者初始化后触发一次resize事件：

手动设置容器尺寸： #

document.addEventListener('DOMContentLoaded', function() {
  const heroContainer = document.getElementById('hero-particles');
  // 比如设置为视口高度
  heroContainer.style.height = window.innerHeight + 'px';
  heroContainer.style.width = window.innerWidth + 'px';
  
  particlesJS('hero-particles', {
    // 配置项
  });
});

初始化后触发resize事件： #

window.addEventListener('load', function() {
  // 先初始化粒子
  particlesJS('hero-particles', { /* 你的配置 */ });
  // 延迟100ms触发resize，确保容器尺寸已稳定
  setTimeout(() => {
    window.dispatchEvent(new Event('resize'));
  }, 100);
});

3. 检查WordPress的脚本加载顺序 #

WordPress的脚本排队系统如果没配置好，可能会让你的初始化代码先于particles.js本身加载，导致报错或者不执行。你需要在主题的functions.php里正确注册脚本，设置依赖关系：

function my_theme_enqueue_particles() {
  // 注册particles.js脚本，设置在页脚加载（最后一个参数true）
  wp_register_script('particles-js', get_template_directory_uri() . '/js/particles.js', array(), '2.0.0', true);
  // 注册初始化脚本，依赖于particles-js，确保它在particles.js之后加载
  wp_register_script('particles-init', get_template_directory_uri() . '/js/particles-init.js', array('particles-js'), '1.0.0', true);
  
  // 加载这两个脚本
  wp_enqueue_script('particles-js');
  wp_enqueue_script('particles-init');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_particles');

4. 排查缓存插件的影响 #

如果你的站点用了缓存插件（比如WP Rocket、W3 Total Cache），脚本合并或延迟加载功能可能打乱了加载顺序。你可以暂时禁用缓存插件测试，如果问题消失，就把particles.js和初始化脚本加入缓存插件的“不合并/不延迟”列表。

内容的提问来源于stack exchange，提问作者Hirohito Yamada