在加载真实图像之前，如何在我的 SVG 中显示占位符图像？答案

【问题标题】：How can I display a placeholder image in my SVG until the real image is loaded?在加载真实图像之前，如何在我的 SVG 中显示占位符图像？
【发布时间】：2015-03-18 18:32:27
【问题描述】：

我正在使用 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 获取请求后将其换成真实的图像。但由于这是 SVG，因此没有明确的请求，我最终得到了一个令人讨厌的损坏图像，然后将其替换为真实的图像。

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

【问题讨论】：

标签： svg d3.js

【解决方案1】：

我无法使用原生的 addEventListener 方法，但看起来您可以设置 onload 属性（至少在 Chrome 中有效）：

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

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

【讨论】：

有趣的是，图像有时已经在浏览器中，因此并不总是调用 onload。其他事件是什么？你能指出你在哪里找到这个吗？（或者你只是猜测并尝试一下！？）编辑：在这里找到它们：w3.org/TR/SVG/interact.html#SVGEvents

【解决方案2】：

@nrabinowitz，您的代码无法按计划运行。

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

正确的实现应该如下（见http://jsfiddle.net/L83nag59/）

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

很遗憾，它在 IE11 中不起作用。

【讨论】：