9

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');
});
fuzzybabybunny
  • 5,146
  • 6
  • 32
  • 58
  • My understanding is that the `.load()` function will not always fire on load, in particular when the image is loaded from system cache. Disabling caching might help. – rfornal Jan 02 '15 at 22:43
  • Here'a a no-cache script I worked on recently ... http://stackoverflow.com/questions/27732140/no-cache-script-without-using-jquery/27732207#27732207 – rfornal Jan 02 '15 at 22:44
  • Interesting. Well, unfortunately I'd still like it to be cached if possible. But even with the thing cached the `var panZoomArm = svgPanZoom('#arm');` still fires off too soon... – fuzzybabybunny Jan 02 '15 at 22:45
  • Have you tried simply polling every 200ms or so to test if it is loaded? [this](http://stackoverflow.com/questions/337293/how-to-check-if-an-embedded-svg-document-is-loaded-in-an-html-page) – EvilZebra Jan 02 '15 at 23:19
  • I got it to work without setting an interval. I don't know why the jQuery way of adding an event listener didn't work though. – fuzzybabybunny Jan 03 '15 at 11:31

3 Answers3

4

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');
});
fuzzybabybunny
  • 5,146
  • 6
  • 32
  • 58
1

In these cases you can set an interval that runs every defined seconds. then clear it when debugger runs or var panZoomArm gets a value using the code below:

if (typeof panZoomArm !== 'undefined') {
    // the variable is defined
    clearInterval(yourInterval);
}

hope it helps you!

Sdghasemi
  • 5,370
  • 1
  • 34
  • 42
0

It is better to use find rather than load to check if an SVG element has finished loading.

Check to determine if the element is ready first. If not, use setTimeout:

 function checkReady() {
    
    if (!$('#arm').find('svg')[0]) {
        setTimeout(function(){checkReady();}, 300);
    } else { 
        debugger
        var panZoomArm = svgPanZoom('#arm');   
    }
    
  }
Jim U
  • 3,318
  • 1
  • 14
  • 24
eQ19
  • 9,880
  • 3
  • 65
  • 77