1

I am trying to dynamically load images in Snap.svg and then once the image has loaded do some processing to it. The load event is firing in Chrome, Firefox and Opera but is does not fire in Internet Explorer or Safari.

I have this setup in Plunker 

var s = null;
var g = null;
var image = null;

//$(document).ready(function($) {
$(window).load(function() {
    s = Snap("#svgout");
    g = s.g();

  $("#baseimage").attr("src", "http://www.customcribboards.com/resources/svgs/preview/29.png");

  $("#baseimage").on("load", function() {
    console.log("hidden image loaded");
    image = g.image($(this).attr("src"), 0,0, 400,400);

    image.node.onload = function () {
        console.log("svg image loaded 1");
    };

    $(image.node).on("load", function() {
        console.log("svg image loaded 2");
    });
  });
});

Any ideas how to make the onload event fire on an svg image load in Internet Explorer and Safari?

Trevor Orr
  • 927
  • 1
  • 14
  • 31
  • Have you tried loading with Snaps load function ? – Ian Feb 20 '15 at 07:42
  • Isn't that function for loading svg files and not images? – Trevor Orr Feb 20 '15 at 07:45
  • Ah I see, I had assumed it was svg incorrectly as its in an svg folder and says svg image loaded, when its png, but loaded into svg. Does the "hidden image loaded" display ? – Ian Feb 20 '15 at 08:21
  • Yes the hidden image does get displayed in the svg in every browser the onload event just does not fire in Internet Explorer and Safari – Trevor Orr Feb 20 '15 at 14:33
  • Just wondering if http://stackoverflow.com/questions/5024111/javascript-image-onload-doesnt-fire-in-webkit-if-loading-same-image is of any use. – Ian Feb 20 '15 at 14:39
  • With the issue being in an svg node and not a html element this doesn't really help since in Snap.svg you can't create an image node and then specify the image src to load into, at least not that I can see. – Trevor Orr Feb 20 '15 at 15:04

1 Answers1

0

For a pure SVG document (SVG being the root element), I have found the following.

In IE9+ (IE11, Edge), putting an onload= in the root element doesn't seem to be respected per the spec or expectation. Instead, IE seems to fire the event "right away" i.e. after the opening of the root element is received, but before the DOM is fully loaded. So, your Javascript cannot find elements you'd expect to be there for example. I have experimented with delays etc. but that's a hokey kludge.

In Firefox, onload= in the root element works as expected, when the DOM is complete, the onload fires.

A workaround for IE is to omit the onload= in the root tag, but put one in a child element that is "late" or "last." This seems to defer firing onload= until the DOM is fully loaded. This kludge is not respected in Firefox, and actually seems to maybe break the triggered Javascript, in at least my case.

So the FF and IE approaches are divergent and seem mutually exclusive.

Dave
  • 378
  • 4
  • 14