javascript - 在触发调整大小事件之前，粒子 js 无法正确显示

Question

如上所述，我正在使用 particles.js库，用于向我正在设计的网站上的 div 添加背景。

当页面加载时，正确的 div 将动画作为背景，但它总是开始得太“放大”。它似乎使用太大的默认屏幕尺寸，但是每当通过直接更改窗口尺寸或打开开发人员控制台来更改屏幕区域时，它都会触发“调整大小”事件，然后所有内容都会正确显示。

调整大小事件代码如下:

if(pJS && pJS.interactivity.events.resize){

  window.addEventListener('resize', function(){

      pJS.canvas.w = pJS.canvas.el.offsetWidth;
      pJS.canvas.h = pJS.canvas.el.offsetHeight;

      /* resize canvas */
      if(pJS.tmp.retina){
        pJS.canvas.w *= pJS.canvas.pxratio;
        pJS.canvas.h *= pJS.canvas.pxratio;
      }

      pJS.canvas.el.width = pJS.canvas.w;
      pJS.canvas.el.height = pJS.canvas.h;

      /* repaint canvas on anim disabled */
      if(!pJS.particles.move.enable){
        pJS.fn.particlesEmpty();
        pJS.fn.particlesCreate();
        pJS.fn.particlesDraw();
        pJS.fn.vendors.densityAutoParticles();
      }

    /* density particles enabled */
    pJS.fn.vendors.densityAutoParticles();

  });

}

我正在寻找一种使动画正确加载的方法，或者在页面加载时立即触发调整大小，以便页面访问者始终看起来正确。

我尝试过的

我尝试手动设置库创建的 Canvas 元素的大小，但这不起作用。我还尝试过更改包含该元素的 div 的大小，但这也不起作用。

潜在冲突或更简单的解决方案

我正在使用 Jquery 3.1.1 和 Bootstrap 3

Answer 1

要触发您所做的调整大小:

$(window).trigger('resize');

当dom加载时