6

D3.js を使用して、ラスター イメージを含むノードでグラフをレンダリングしています。

var mainscreenURL = s3_base_url + viewController + "/screenshot.jpeg";
svg.select(".mainScreen").transition().attr("height",0).remove();

svg.append("image").attr("xlink:href", mainscreenURL)
        .attr("width", mainScreenW)
        .attr("height", mainScreenH)
        .attr("x", (w / 2) - (mainScreenW / 2)) 
        .attr("y", (h / 2) - (mainScreenH / 2)) 
        .attr("class", "mainScreen")
        .attr("id", viewController)
});

これらの画像の一部は非常に大きいため、HTTP 要求 (ブラウザーによって暗黙的に行われる) にはかなりの時間がかかる場合があります。画像は動的に生成されるため、キャッシュできません。

これが通常の HTML である場合は、プレースホルダーの画像を表示し、HTTP の get 要求が正常に完了すると、実際のものと交換します。しかし、これは SVG であるため、明示的な要求はなく、最終的には厄介な壊れた画像になり、それが実際のものに置き換えられます。

イメージが完全に読み込まれたときにフックできるイベントはありますか?

4

2 に答える 2

3

関連参照: SVG で画像読み込みイベントをリッスンすることは可能ですか?

ネイティブaddEventListenerアプローチを機能させることができませんでしたが、属性を設定するだけでよいようですonload(少なくとも Chrome では機能します)。

svg.append("image")
    .attr('onload', function() {
         alert('loaded');
    })
    .attr("xlink:href", mainscreenURL);

フィドルを参照してください: http://jsfiddle.net/dKxH9/

于 2013-09-17T19:45:47.330 に答える