0

I have a project which uses Particle.JS to create a canvas with moving image particles. The problem i am currently having is that every image is being reloaded constantly after a certain amount of time while it's already loaded.

config.json

"particles": {
"number": {
  "value": 10,
  "density": {
    "enable": false,
    "value_area": 100
  }
},
"color": {
  "value": "#ffffff"
},
"shape": {
  "type": ["image0", "image1", "image2", "image3", "image4", "image5"],
  "stroke": {
    "width": 0,
    "color": "#000000"
  },
  "polygon": {
    "nb_sides": 5
  },
  "image": {
    "src": "images/0.png",
    "width": 100,
    "height": 100
  }
},

I used this case to filter out all image types in the switch.(pJS.fn.particle.prototype.draw)

particles.js

case (p.shape.match(/image/) || {}).input:
    if(pJS.tmp.img_type == 'svg'){
      var img_obj = p.img.obj;
    }else{
      var img_obj = pJS.tmp.img_obj;
    }
    var element = document.createElement('img');
    var number = p.shape.replace("image", "")
    element.src = './styles/eles/theme/images/particlelogo/'+number+'.png';
    img_obj = element;

    if(img_obj){
      draw();
    }
    break;

Original particle.js github link

000HARWINDER000
  • 1
  • 2
  • Might be cause you are calling draw() when it passes the match condition. When does the case block get executed? Disclaimer: stumbled upon this when I was googling. Never used particle.js before – ali Sep 24 '18 at 17:37
  • You can use [this library](https://github.com/matteobruni/tsparticles) to have multiple images – Caelan Jul 02 '20 at 19:47

1 Answers1

0
"shape": {
  "type": "images",
  "stroke": {
    "width": 0,
    "color": "#000"
  },
  "polygon": {
    "nb_sides": 6
  },
  "images": [
    {
      "src": "img/shapes/0.svg",
      "width": 100,
      "height": 100
    },
    {
      "src": "img/shapes/1.svg",
      "width": 100,
      "height": 100
    }
  ]
},
Md. Mahmudul Hasan
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 31 '22 at 04:59