In Chrome, resource isn’t loaded when $(document).ready() is triggered. Why?

In Firefox and IE, the SVG <embed> (SVG) document is retrieved when $(document ).ready() is called.

In Chrome, the getSVGDocument returns null instead when $(document ).ready() is called. (Although it seems to find it approx 7ms after, as shown by the setTimeout.)

Why does Chrome not find the loaded <embed> SVGdocument at moment of $(document ).ready(), but Firefox and IE do?

(I don’t want to have to use a setTimeout(7ms) just to wait for Chrome to catch up! Because that’s… lame.)

The code simple code below shows scenario: RETURNS SVGDocument in Firefox + IE RETURNS NULL in Chrome (unless the call to getSVG() is delayed by 7ms!).

N.B: This code needs to be run on localhost server with Chrome; that is a separate Chrome issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>

    getSVG = function () {

        var el = document.getElementById("embedId");

        SVGDoc = el.getSVGDocument();

        console.log(SVGDoc);                           // returns null in Chrome

    }



    $(document).ready(function () {

        getSVG();                        

        //setTimeout("getSVG()", 7);      // this works, showing that Chrome is NOT "ready"

    });


</script>

</head>

<body>

<embed id="embedId" src="man.svg" type="image/svg+xml" width="50" height="50"/> 

</body>

</html>

Answer

Try this

$(window).load(function(){
    console.log($('#embedId')[0].getSVGDocument());
});

Another possible solution:

$(function(){
    var a = $('#embedId')[0];

    a.addEventListener("load",function(){

        //do stuff with 'a'

    },false);
});

Advertisement

Answer