How do I wait for the SVG inside the <object> to finish loading before some JS starts working?
I have this in my html (SVG about 500K):
<object type="image/svg+xml" data="/assets/images/test-diagram.svg" width="100%" height="100%" id="arm" class="svg-content"></object>
I am using a script on GitHub to create a viewport for SVG so that I can pan and zoom inside the viewport, but like GoogleMaps.
https://github.com/ariutta/svg-pan-zoom
So the loading order should be:
- svg-pan-zoom.js completes
- all 500k svg should finish loading
-
you need to execute the following code:
var panZoomArm = svgPanZoom('#arm');
Unfortunately, the above code runs when the SVG is not fully loaded, resulting in errors.
I tried this but .load
doesn't seem to be intended for <object>
- debugger
never actually starts
$('#arm').load(function(){
debugger
var panZoomArm = svgPanZoom('#arm');
});
Could this tell me that the code only runs after 500k svg has been fully loaded?
The only way to keep this code safe is to make the SVG fully inline ... so, for example, hundreds of lines of code with no caching capability.
EDIT ----
Ok, I got it to work, but I'm confused.
This doesn't work (the debugger never starts):
$('#arm').load(function(){
debugger
var panZoomArm = svgPanZoom('#arm');
});
It works:
var arm = document.getElementById("arm");
arm.addEventListener('load', function(){
debugger
var panZoomArm = svgPanZoom('#arm');
});
source to share
This is how I got it working:
<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');
});
source to share
In these cases, you can set interval
one that runs every certain seconds. then clear it when starting the debugger or var panZoomArm
get the value using the following code:
if (typeof panZoomArm !== 'undefined') {
// the variable is defined
clearInterval(yourInterval);
}
hope this helps you!
source to share