在加载真实图像之前，如何在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，我会显示一个占位符图像，然后在成功完成HTTPGET请求后将其替换为真实图像。但由于这是SVG，所以没有明确的请求，我最终得到了一个糟糕的破碎图像，然后用真实的图像替换

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

请参阅相关内容：

我无法使用本机的

addEventListener

方法，但看起来您可以设置

onload

属性（至少在Chrome中有效）：

---

请参阅fiddle:

@nrabinowitz，您的代码没有按计划工作

使用.attr（'onload'，function（）{}）在分配'onload'属性期间调用函数，而不是在onload事件期间调用函数

正确实施应如下所示（见）

---

不幸的是，它在IE11中不起作用。

有趣的是，图像有时已经在浏览器中，所以onload并不总是被调用。还有哪些活动？你能告诉我你在哪里找到这个吗？（或者你只是猜测并尝试一下！？）编辑：在此处找到它们：

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

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