0

元のソース コードにアクセスできない既存のソリューションを最適化するために、一部の JavaScript コードをオーバーライドしようとしています。これは、SVG 画像をレンダリングするいくつかのポートレットを備えた Liferay ベースのポータルです。SVG は、技術サービス モデルにドリルダウンするために使用できるグラフィカル ナビゲーション要素として使用されます。SVG 画像の読み込みと更新は、実装方法が原因で遅くなる場合があります。更新は実際には Web サーバーに対して 2 つの要求を行うため、SVG は数秒間消えます。まず、完全なオブジェクト タグがサーバー側で再生成され、DOM に再挿入されます。最初のリクエストのレスポンスは次のようになります。

<div><object type="image/svg+xml" data="generateSvg.svg” width="100" height="300" name="svgId"> <param name="wmode" value="transparent"></object></div>

SVG の実際のリクエストは、最初のレスポンス テキストが DOM に挿入され、元のオブジェクト タグが削除されるまでに開始されます。SVG 画像は非常に複雑になる可能性があり、ソフトウェアの一般的な速度が低下する可能性があるため、SVG は消えて、Web ブラウザーによって受信およびレンダリングされるまでに戻ります。最初のステップをスキップして、SVG を非同期で更新することにより、画像が「点滅」しないようにしたいと思います。jQuery を使用すると、元の JavaScript コードをオーバーライドして SVG の URL を取得し、jQuery ajax リクエストを実行できます。結果を DOM に挿入することもできますが、インライン SVG として挿入すると、オブジェクト タグに埋め込まれた場合とは異なる画像がレンダリングされます。SVG コンテンツ要素の一部が切り取られていますが、これは、SVG が外部 URL を持つオブジェクト タグとして追加されている場合には発生しません。

SVG をオブジェクト タグに埋め込んでその URL を非同期にロードするか、インライン SVG のレンダリングの問題を解決したいと考えています。SVG コードは既存のソフトウェアの一部であるため、変更できません。data 属性に URL を追加せずに、非同期にロードされたデータをオブジェクト タグに追加する方法はありますか?

SVG を追加するための私の JavaScript は次のようになります。

indentifier.loadSvg = (function(){
    if(this.svgUrl){                        
        $.ajax({
            url: this.svgUrl,
            //enclose the right div in which the svg should be loaded as a context
            context: $('#_layout_WAR_Portlets_INSTANCE_' + this.portalId + '_plugin'),
            dataType: 'xml'
            }).done(function(svgDoc) {
                //construct an svg node and add it to the DOM
                var svgNode = $('svg', svgDoc);
                var docNode = document.adoptNode(svgNode[0]);
                $(docNode).attr('width', '100%').attr('height', '300');
                this.html(docNode);
            });

    }
});
4

1 に答える 1

0

object タグ内で可能かどうかはわかりませんが、Iframe でうまくいくはずです。JavaScript で新しい Object タグを作成し、svg をロードして、古いオブジェクトを新しいオブジェクトに置き換えてみてください。次のようになります。

var datasrc = "#";

// Create new object tag
var newobj = jQuery('<obj>', {
    id: 'newobject',
    data: datasrc,
    type: 'image/svg+xml'
});
    // Set parameters
    jQuery('<param />', {
        name: 'src',
        value: datasrc
    }).appendTo('#newobj');
    jQuery('<param />', {
        name: 'wmode',
        value: 'transparent'
    }).appendTo('#newobj');

// Dynamically load content and replace when done
newobj.load(datasrc,function(){
    $('#objectwrapper').empty();
    newobj.appendTo('#objectwrapper');
    alert("succes"); // Just to check if this works!
});

JSFiddle: http://jsfiddle.net/cfERU/9/

アラートは 2 回発生します。これは JSFiddle の問題だと思います。

于 2013-10-10T09:26:51.890 に答える