Question

Microsoft已宣布可以关闭报告加载时显示的加载图像。

加载图像

使用Power BI Embedded JavaScript SDK隐藏闪烁的Power 加载报告时显示的BI徽标。 -power-bi-embedded-feature-hide-the-power-bi-logo-during-visualization-load

但是，我在任何JS SDK文档或任何在线示例中都找不到对此的提及。

有人实现了吗？

Answer 1

首先添加您想要的 gif，而不是 Power BI 徽标。您可以将其添加到 div 元素中。此元素将与包含报告的 div 元素重叠。 HTML 代码如下所示：

<div id="container">
     <div id="overlay">
         <img id="spinner" alt="Alternate Text" src="image/giphy.gif"/>
     </div>
     <div id="embedContainer" style="height: 600px; width: 100%; max-width: 1400px;">
     </div>
 </div>

一旦你添加了你的 gif。现在，在 JavaScript 代码中进行更改。所以你最终的 JavaScript 嵌入代码将是：

<script type="text/javascript">
    // Read embed token
    var embedToken = "<% =this.embedToken %>";
    // Read embed URL
    var embedUrl = "<% = this.embedUrl %>";
        // Read report Id
        var reportId = "<% = this.reportId %>";

    // Get models (models contains enums)
    var models = window['powerbi-client'].models;

    // Embed configuration is used to describe what and how to embed
    // This object is used when calling powerbi.embed
    // It can also include settings and options such as filters
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: embedToken,
        embedUrl: embedUrl,
        id: reportId,
        settings: {
            filterPaneEnabled: true,
            navContentPaneEnabled: false
        }
    };

    $("#embedContainer").css("visibility", "hidden");

    // Get a reference to the embedded report HTML element
    var reportContainer = $('#embedContainer')[0];


    // Embed the report within the div element
    var report = powerbi.embed(reportContainer, config);

    report.on("loaded", function (event) {
        $("#overlay").hide();
        $("#embedContainer").css("visibility", "visible");

        report.off("loaded");

    })


</script>

您还可以添加 CSS 使您的 gif 与您的报告保持一致：

<style>
        #container{
            position:absolute;
            width: 1400px;
            height:600px;
        }

        #overlay{
            position:absolute;
            width:inherit;
            height:inherit;
        }

        #spinner{
            display: block;
            margin-top:10%;
            margin-left: auto;
            margin-right: auto;
            width:10%;
            height: 10%;

        }
</style>

此外，您可以参考以下 YouTube 链接：https://www.youtube.com/watch?v=YhjtunTmnbw。此视频来自 Power BI 官方 YouTube 帐户。在本视频中，您可以了解如何使用 Power BI Embedded 在您的应用程序中获得带有白标的嵌入式分析。了解如何在加载或呈现事件之前隐藏 Power BI 徽标，以及如何在加载阶段使用个性化徽标。

Answer 2

当前无法删除PowerBI加载符号。最好还是建议输入自己的自定义徽标

Answer 3

即使在您引用的文章中，推荐的方法也是- 1.隐藏iframe（或包含它的div） 2.使用（分阶段加载）[https://github.com/Microsoft/PowerBI-JavaScript/wiki/Phased-Embedding-API]或loaded时监听rendered事件 3.显示您之前隐藏的div并瞧瞧-嵌入式电源bi已加载。.

在可视化加载期间隐藏Power BI徽标

3 个答案: