如何在 SVG 中显示占位符图像，直到加载真实图像？

我正在使用 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，所以没有明确的请求，最终我得到了一个令人讨厌的损坏图像，然后将其替换为真实的图像。

是否有任何事件可以让我知道图像何时完全加载？

参见相关：是否可以监听 SVG 中的图像加载事件？ https://stackoverflow.com/questions/11390830/is-it-possible-to-listen-image-load-event-in-svg

我无法获得本地人addEventListener工作方法，但看起来你可以设置onload属性（至少在 Chrome 中有效）：

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

参见小提琴：http://jsfiddle.net/dKxH9/ http://jsfiddle.net/dKxH9/