Run function after CTA loads

[tstrack]

I'm looking to run a simple function after all of my HubSpot CTAs (20 or so) have completely loaded:

$grid.isotope();

My Isotope layout is triggered on page load and window resize. The loading delay on the HubSpot CTAs prevents the layout from rendering correctly on page load. It only functions properly when I resize my browser window.

Is there a way to run that function after all my HubSpot CTAs have loaded?

[Ty]

Just off the top of my head, the $grid.isotope(); builds your grid correct? Have you tried using jquery to check if your page has loaded before firing it? I haven't tested this in your case exactly, but I have used similar things to deal with slower embeds. Basically, you'll give all your cta's a class name, then using the (window).load(); command to check if your page has been fully loaded, if it has, you check if that class exists.

Something like this:

$(window).load(function () {
  if ($('.cta-button').length) {
    $grid.isotope();
  };  
});

1. So, to recap, you wait for your page to be fully loaded in $(window).load(function (){ }.

2. Then the moment the JS fires, it searches for your class '.cta-button' on your page. 

3. If this class exists, it fires your isotope grid build command. 

Let me know if this works out and fits your needs, if not I can revisit it and try and figure out a better way to do this. But I believe you will need to have a delayed function to check for the ctas. Another option is running a setTimeout function on your grid build, but due to internet speeds fluctuating, that probably wouldn't be the best solution, since my browser might load in 3 secs, while someone elses could load in 5 or 6. Atleast with $(window).load, you will be checking the browser locally, rather than guessing globally. 

-- Ty

[tstrack]

The window load function doesn't always work. I ended up using setTimeout.

[Ty · Accepted solution]

Hey tsrack,

I looked into this and it seems that window load, has become depreciated in jquery 1.8. Using a timeout function should still work, but it seems the replacement for it is $window.on('load', function).

If you wanted to try it again, that function would look like this:

$(window).on('load', function () {
  if ($('.cta-button').length) {
    $grid.isotope();
  };  
});

[tstrack]

That worked great. Thanks, Ty!