如何在加载实际图像之前在SVG中显示占位符图像？

Question

我正在使用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,没有明确的请求,我最终得到了一个令人讨厌的破碎图像,然后被真实的东西取代.

在图像满载时,是否有任何可以挂钩的事件？

Answer 1

请参阅相关内容：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/