JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在加载实际图像之前在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,没有明确的请求,我最终得到了一个令人讨厌的破碎图像,然后被真实的东西取代.

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

解决方法

见相关: 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/

大佬总结

以上是大佬教程为你收集整理的如何在加载实际图像之前在SVG中显示占位符图像?全部内容,希望文章能够帮你解决如何在加载实际图像之前在SVG中显示占位符图像?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: