alternative to javascript load for an object of type image/svg-xml

问题

my load function in chrome is giving me different values for the height and width of the image on the first load. it gives correct values only once i reload the same image.

is there an alternative to checking if an image has loaded?

i call it to check if the svg image is loaded. 1) i create an object in js of type image/svg-xml 2) onload { get the height and width } ISSUE HERE 3) do something with these 2 values

because the first load is wrong the 3) step also generates incorrect output (for the first load only) subsequent loads of the image are fetched from the cache and the correct values are given.

this.svg = null;
 this._W = 0;
 this._H = 0;


this.svg.addEventListener('load',function() {
    this._W = jQuery(".SVGImage").width();
    this._H = jQuery(".SVGImage").height();
    this._best();
}.bind(this));

in IE and firefox my function works perfectly fine on the 1st load and it gets the correct height and width. But in chrome the 1st load gives different values to the subsequent loads of the same image.

_best() function works fine for all other functions using it. so the problem isnt here but it looks something like:

var x = this._x - (this._imageW - this._canvas.clientWidth) / 2;
var y = this._y - (this._imageH - this._canvas.clientHeight) / 2;
......

the 1st load: image zoomed in (because values for _W and _H are incorrect. 2nd load + = all fine :)

来源：https://stackoverflow.com/questions/34984029/alternative-to-javascript-load-for-an-object-of-type-image-svg-xml