$(window).load firing before embedded svg is done loading in chrome

Question

I am loading an svg object to manipulate. It appears that when i click on the link to enter the page, the svg loads and the $(window).load fires just before the svg is loaded. However, it works normally when you refresh the page. I think perhaps it is because it's loading the svg from cache on the first go? Is there anything i can do? The only things i can think of are very shoddy, like adding a short delay... and this doesn't seem to be a problem in firefox. only chrome.

function getSubDocument(embedding_element) {
    if(embedding_element.contentDocument) {
        return embedding_element.contentDocument;
    } else {
        var subdoc = null;
        try {
            subdoc = embedding_element.getSVGDocument();
        } catch(e) {}
        return subdoc;
    }
}
$(window).load(function () {
    alert('loading complete');
    var a = document.getElementById("hero");
    var svgDoc = getSubDocument(a); //a.contentDocument; //get the inner DOM of alpha.svg
    var hair = svgDoc.getElementById("hair");
    var shirt = svgDoc.getElementById("body");
    var head = svgDoc.getElementById("head");
    var left_arm = svgDoc.getElementById("left_arm");
    var right_arm = svgDoc.getElementById("right_arm");
    var pants = svgDoc.getElementById("pants");
    //var weapon = svgDoc.getElementById('axe');
    //weapon.setAttribute('display', "");
    hair.setAttribute("fill", '{{ profile.hair_color }}');
    shirt.setAttribute("fill", '{{ profile.shirt_color }}');
    head.setAttribute("fill", '{{ profile.skin_color }}');
    left_arm.setAttribute("fill", '{{ profile.skin_color }}');
    right_arm.setAttribute("fill", '{{ profile.skin_color }}');
    pants.setAttribute("fill", '{{ profile.pants_color }}');

    $("input[name='colorType']").change(function () {
        var ct = $("input[name='colorType']:checked").val();
        var c;
        if(ct == 'Hair') {
            c = $("#id_hair_color").val();

        } else if(ct == 'Shirt') {
            c = $("#id_shirt_color").val();
        } else if(ct == 'Skin') {
            c = $("#id_skin_color").val();
        } else if(ct == 'Pants') {
            c = $("#id_pants_color").val();
        }
        $.farbtastic('#colorpicker').setColor(c);
    });

    $('#colorpicker').farbtastic(function (e) {
        var ct = $("input[name='colorType']:checked").val();
        c = $.farbtastic('#colorpicker').color;
        if(ct == 'Hair') {
            hair.setAttribute('fill', c);
            $("#id_hair_color").val(c);
        } else if(ct == 'Shirt') {
            shirt.setAttribute('fill', c);
            $("#id_shirt_color").val(c);
        } else if(ct == 'Skin') {
            head.setAttribute('fill', c);
            left_arm.setAttribute('fill', c);
            right_arm.setAttribute('fill', c);
            $("#id_skin_color").val(c);
        } else if(ct == 'Pants') {
            pants.setAttribute('fill', c);
            $("#id_pants_color").val(c);
        }
        // conole.log(JSON.stringify($.farbtastic('#colorpicker').color));

        // hair.setAttribute("fill", c);
    });
    $.farbtastic('#colorpicker').setColor("#f0ff5f");
    // var sword = svgDoc.getElementById("right_arm"); //get the inner element by id
    // // sword.addEventListener("mousedown",function(){alert('hello world!')},false);
    // alert('got to here');

});

html

<embed src="/static/images/hero2.svg" style="width: 100%" id="hero" type="image/svg+xml" />

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

Try using $('#hero').ready() inside of $(window).load() and see what happens. See this answer, which attaches a load handler to the svg element instead of a ready handler, but I think either one should work.

edited May 23 '17 at 12:28

Community

1
1

answered May 01 '13 at 06:35

Ryan Lynch

7,676
1
24
33

$("#hero").ready(... and $("#hero").load(... inside of the window load have the same behavior. – Eric Wooley May 01 '13 at 06:42
Thanks, after I closed the browser and reopened it, the problem ceased to occur. Thanks for your answer. I will be doing it this way from now on. EDIT: It started doing the same thing again after the second load. I can provide you with a link if need be. I just need to setup a demo account for you, unless you want to register. – Eric Wooley May 01 '13 at 06:53
Also, it doesn't fire if you are going to the page from the back button. I think it has to do with caching, maybe? – Eric Wooley May 01 '13 at 06:57
`.ready()` does not care about the selector. The event handler is called as soon the the document is loaded. – a better oliver May 01 '13 at 07:03
``.ready()`` doesn't seem to work for me outside JSfiddle, but it does seem to be working inside it. Strange! – Vadim Peretokin Dec 12 '13 at 06:52

score 0 · Answer 2 · answered May 01 '13 at 07:10

I ended up setting a timeout inside of the $(window).load, a 10 ms delay seemed suffucient. It works fine on my phone, tablet and on chrome. I am fairly convinced it has something to do with the caching.

I am not marking this as the answer, hopefully someone else can find a better way.

<script type='text/javascript'>
    function getSubDocument(embedding_element)
    {
        if (embedding_element.contentDocument) 
        {
            return embedding_element.contentDocument;
        } 
        else 
        {
            var subdoc = null;
            try {
                subdoc = embedding_element.getSVGDocument();
            } catch(e) {}
            return subdoc;
        }
    }
    $(window).load(function(){
        setTimeout(function(){
            var a = document.getElementById("hero");
            var svgDoc = getSubDocument(a);//a.contentDocument; //get the inner DOM of alpha.svg
            var hair = svgDoc.getElementById("hair");
            var shirt = svgDoc.getElementById("body");
            var head = svgDoc.getElementById("head");
            var left_arm = svgDoc.getElementById("left_arm");
            var right_arm = svgDoc.getElementById("right_arm");
            var pants = svgDoc.getElementById("pants");
            //var weapon = svgDoc.getElementById('axe');
            //weapon.setAttribute('display', "");
            hair.setAttribute("fill", '{{ profile.hair_color }}' );
            shirt.setAttribute("fill", '{{ profile.shirt_color }}' );
            head.setAttribute("fill", '{{ profile.skin_color }}' );
            left_arm.setAttribute("fill", '{{ profile.skin_color }}' );
            right_arm.setAttribute("fill", '{{ profile.skin_color }}' );
            pants.setAttribute("fill", '{{ profile.pants_color }}' );

            $("input[name='colorType']").change(function(){
                var ct = $("input[name='colorType']:checked").val();
                var c;
                if(ct == 'Hair'){
                   c = $("#id_hair_color").val();

                }
                else if (ct == 'Shirt'){
                    c = $("#id_shirt_color").val();
                }
                else if (ct == 'Skin'){
                    c = $("#id_skin_color").val();
                }
                else if (ct == 'Pants'){
                    c = $("#id_pants_color").val();
                }
                $.farbtastic('#colorpicker').setColor(c);
            });
            $("#weapon_type").change(function(){
                nw = $("#weapon_type").val();
                svgDoc.getElementById('sword').setAttribute('display', 'none');
                svgDoc.getElementById('axe').setAttribute('display', 'none');
                svgDoc.getElementById(nw).setAttribute('display', '');

            });

            $('#colorpicker').farbtastic(function(e){
                var ct = $("input[name='colorType']:checked").val();
                c = $.farbtastic('#colorpicker').color;
                if(ct == 'Hair'){
                    hair.setAttribute('fill', c);
                    $("#id_hair_color").val(c);
                }
                else if (ct == 'Shirt'){
                    shirt.setAttribute('fill', c);
                    $("#id_shirt_color").val(c);
                }
                else if (ct == 'Skin'){
                    head.setAttribute('fill', c);
                    left_arm.setAttribute('fill', c);
                    right_arm.setAttribute('fill', c);
                    $("#id_skin_color").val(c);
                }
                else if (ct == 'Pants'){
                    pants.setAttribute('fill', c);
                    $("#id_pants_color").val(c);
                }
                // conole.log(JSON.stringify($.farbtastic('#colorpicker').color));

                // hair.setAttribute("fill", c);
            });
            $.farbtastic('#colorpicker').setColor("#f0ff5f");
            // var sword = svgDoc.getElementById("right_arm"); //get the inner element by id
            // // sword.addEventListener("mousedown",function(){alert('hello world!')},false);
            // alert('got to here');
        }, 10);
    });
</script>

I'm running into the same problem, but the delay isn't working for me - even on 1s. However, it works just fine in JSfiddle... — Vadim Peretokin, Dec 12 '13 at 22:34

$(window).load firing before embedded svg is done loading in chrome

2 Answers2