How to wait for an SVG inside <object> to finish loading before some JS fires?

Question

I've got this in my html (the SVG is about 500K):

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>

I'm using a script on GitHub to create a viewport for the SVG so that I can pan and zoom inside the viewport, but like GoogleMaps.

https://github.com/ariutta/svg-pan-zoom

So the load order needs to be:

1. svg-pan-zoom.js finishes
2. all 500k of the svg needs to finish loading

3. the following code needs to run:

   var panZoomArm = svgPanZoom('#arm');

Unfortunately the code above runs when the SVG isn't completely loaded, resulting in errors.

I've tried this but .load doesn't appear to be designed for <object> - in fact debugger never gets triggered

$('#arm').load(function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});

Is these some way for me to tell the code to run only after the 500k svg has been completely downloaded?

The only way for me to have this code fire off reliably is to make the SVG entirely inline... so that's like hundreds of lines of code with no ability to cache.

EDIT----

Ok, I got it to work, but I'm confused.

This does not work (debugger never triggers):

$('#arm').load(function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});

This works:

var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
    debugger
    var panZoomArm = svgPanZoom('#arm');
});

Answer 1

This is how I got it to work:

<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>

var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
    var panZoomArm = svgPanZoom('#arm');
});