0

I have a wordpress site that I've added quite a bit of custom code to.

The site loads reasonably fast. However, on the homepage we are applying a particles.js animation to the background canvas.

The relevant code for applying the particles is seen here:

jQuery("particles2").ready(function( $ ){
      if(!window.isMobile && document.getElementById('particles2') != null) {
    desktopParticles();
  }
});

Where "particles2" is the ID of the element we are applying particles on top of.

If you observe the loading of the page, you'll see that the homepage appears to load quickly, under one second, however the particles.js animation takes several seconds to take effect (presumably it appears to be running alongside the rest of the JS on the page).

I figured that adding a .ready event listener to the relevant DIV would apply the particles animation the second the div is available on the DOM. However, the animation appears to be getting applied almost on par with the final page load.

What would be the best way to apply the particles.js animation as quickly as possible, ideally immediately after the relevant background div is available on the DOM?

Note: This is a wordpress site so unfortunately I don't have much direct access to the HTML, so inlining a script is most likely out of the question unless there is a technique to do so that I'm unaware of

Thanks!

Robert Anderson
  • 21
  • 5
  • `.ready()` only fires once the entire DOM is loaded and it doesn't matter if you attach it to an element or not. https://api.jquery.com/ready/. https://stackoverflow.com/questions/17071697/how-to-call-a-function-after-a-div-is-ready may be useful to you – j08691 Mar 07 '19 at 16:58
  • Javascript and web standards states when Javascript loads. Set it at the top of the page, and minimize. – ABC Mar 07 '19 at 16:58

0 Answers0