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

Question

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>

Depends maybe how chrome is handling DOM events. Whats give window.onload = function(){...} ??? — A. Wolff, Oct 22 '12 at 14:42
The "ready" event happens when the DOM is fully built but potentially *before* other resources (images, embeds, etc) are loaded. — Pointy, Oct 22 '12 at 14:44
The element IS "ready" since you can select it, however it's contents are not loaded yet. — Kevin B, Oct 22 '12 at 14:48
@roasted Not sure what you mean "whats give window.onload = function(){...}???" — matt, Oct 22 '12 at 16:22
@Pointy This all makes sense, thanks for the insight. However, same shouldn't be true for the window.onload event. (Chrome just effs up there i think) — matt, Oct 22 '12 at 16:37
@matt The "load" event and the "ready" event have different semantics. The "load" event fires when *everything* has been loaded. Chrome is working within the tolerance of the spec here. — Pointy, Oct 22 '12 at 16:50
@Pointy I agree with you about the semantics completely. That's what I'm saying (as far as my Chrome goes anyway) the "load" event IS firing BEFORE my embed content has loaded!!! (window.load that is, NOT jQuery's $(window).load) — matt, Oct 23 '12 at 09:02
@matt the "load" event via jQuery is the native browser event. The "ready" event is also native in Chrome I think. — Pointy, Oct 23 '12 at 12:50

score 2 · Answer 1 · answered Oct 22 '12 at 14:46

2

You should use $(window).load() instead of $(document).ready() to wait for loaded embbeds, iframes and images

answered Oct 22 '12 at 14:46

Diego ZoracKy

2,227
15
14

That did the trick nicely! I never new that existed. Cheers Diego, Simple, right under my nose. Still a little annoyed that the native onload doesn't work right in Chrome, but this has made my day! :) – matt Oct 22 '12 at 16:24

Johan · Accepted Answer · 2012-10-22T14:55:54.237

2

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);
});

edited Oct 22 '12 at 14:55

answered Oct 22 '12 at 14:47

Johan

35,120
54
178
293

Cheers Johan, $(window).load() is just what i needed! The second solution though: how does the jQuery function work. I've never used a jQuery wrapped function... how is it executed? – matt Oct 22 '12 at 16:29
The "jQuery wrapped" solution is just another way of setting up a "ready" handler, so it will **not** work. – Pointy Oct 22 '12 at 16:49
1

@Pointy Combined with the load event listener it should. – Johan Oct 22 '12 at 20:46
1

@Johan ah yes you're right, I didn't even see that! Completely OK then. – Pointy Oct 22 '12 at 21:50
so waa do you do with it... $(window).load($(yourJQueryFunction))... or... $(document).ready($(yourJQueryFunction))... – matt Oct 23 '12 at 09:09
@matt document ready is fired when the DOM has loaded. window onload waits for the assets in the page to be completely loaded (images for example) – Johan Oct 23 '12 at 09:23
1

@Johan , ah yes I've just seen it too. Great, thanks for all the help guys. – matt Oct 23 '12 at 09:47

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

2 Answers2

Linked