$(window).load 在嵌入 svg 完成加载之前触发

Question

我正在加载一个 svg 对象以进行操作。看来，当我单击链接进入页面时，svg 加载并且 $(window).load 在加载 svg 之前触发。但是，刷新页面时它可以正常工作。我想也许是因为它是第一次从缓存中加载 svg？有什么我可以做的吗？我能想到的唯一事情是非常粗制滥造，比如添加一个短暂的延迟......这在Firefox中似乎不是问题。只有铬。

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" />

Answer 1

尝试在$(window).load() 中使用$('#hero').ready()，看看会发生什么。请参阅this answer，它将负载处理程序附加到 svg 元素而不是就绪处理程序，但我认为任何一个都应该工作。

Answer 2

我最终在 $(window).load 中设置了一个超时，10 毫秒的延迟似乎就足够了。它在我的手机、平板电脑和 chrome 上运行良好。我相当确信它与缓存有关。

我没有将此标记为答案，希望其他人能找到更好的方法。

<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>