Trigger Animation on SVG Load complete

[Duke3D]

I'm working on a complex animation that is working well.  My Javascript foo is weak.  I am aware of how to delay launch of an animation until either page complete or by setting a fixed delay.  The issue I have is that there is a very sizable non-animated traced photo that makes the SVG large and slow to both download and to paint.  Is there a JS method to determine when the painting of the complex image is complete in order to trigger or unpause a subsequent animation?  Without a delay, at least as viewed on CodePen, the animation launches while the painting is still in progress.  The image is in a named illustrator group.  The group to watch is id="BillVector"

Option 1)  To not display the image group until the painting is complete then quickly fade up to prevent a FOUC. 

Option 2)  Place a lower fidelity image in the animated SVG container so it can run as expected, then lazy load and substitute the higher resolution version once it is complete.  I presume I can address a group within an SVG using get element by ID and replace the inner html to keep the hi-res paths at the same Z-level as the placeholder low-res paths.  Or load the hires under the low-res and display:none the low-res when the hires load and paint is complete.  Again this approach needs a trigger for when the SVG render is complete and I'm not sure how to set that up / where to read about it.

 

Thank you in advance for some slightly off-topic but related JS coaching.

See the Pen MdwRGQ by Duke3D (@Duke3D) on CodePen

[Jonathan]

Hello @Duke3D and Welcome to the GreenSock Forum!

 

This is more of general JS question related to event binding and listening of an element, than a GSAP API specific question.

 

Now this could be done by just adding an addEventListener() on the load event for the element your checking if its loaded.

 

But for my own uses, I have a little jQuery monitor element is loaded script i use to check if various elements are loaded.

 

/* monitor if element is loaded (minified jquery plugin) */
(function($){jQuery.fn.monitor=function cb(callback){var set=this.first();var h=set.height();var w=set.width();var txt=set.text();var html=set.html();(function flux(){setTimeout(function(){var done=h==set.height()&&w==set.width()&&txt==set.text()&&html==set.html();if(done){if(jQuery.isFunction(callback))callback()}else{h=set.height();w=set.width();txt=set.text();html=set.html();flux()}},500)})()};})(jQuery);

 

Its usage is like this

 

/* run monitor check on element #BillVector */
$("#BillVector").monitor(function(){   
  
  // code to run when element is loaded
  console.log("#BillVector is loaded");  
  
});

 

And here is your codepen with that Monitor Element Loaded jQuery script in it.

 

You will see console log fire when #BillVector element is loaded. Check console for output:

 

See the Pen ydeJmp?editors=1111 by jonathan (@jonathan) on CodePen

 

Happy Tweening

[Duke3D]

My initial sense was that the issue was in the post-load rendering since the paths appear to be painted sequentially, as opposed to just getting the file loaded so the event listener ought to be triggered by render complete instead of load complete.  The delay until the alert you added appears makes me think the SVG paths start to be rendered before the SVG load is complete - something I didn't expect.

Thanks for the code and the off-topic coaching, I'll give it a try.

/Duke