Question

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

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

resize事件代码如下：

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时

在触发resize事件之前，粒子js无法正常显示

我尝试了什么

潜在冲突或更容易解决方案

1 个答案: