Phased loading of embedded content in Power BI Embedded

The loading of an embedded artefact in Power BI Embedded is done through an embed call that contains an embedded configuration object and the <div> element that contains iframe. Once the embedded object has been called, it will be loaded in front of the user.

To improve the user experience and provide more tools for developers, we have extended this flow with more JavaScript calls that add phases to the embedding process:

1. Preload. The powerbi.preload() call uses the browser’s cache and download scripts before showing the embedded object itself. This can be useful for apps that host several embedded reports. A ready event will be fired once the preload has been completed.
2. Load metadata. The powerbi.load() call helps retrieve info on the embedded object, and dynamically changes the settings or the <div> element in the background, before the object is displayed to the user. For example, you can use this function to get pages and then decide which page to show the user. Or, you can use get visuals and then decide which visuals you want to show or hide. If you use this function, you need to call the render() function to show the embedded object. Once the load has been completed, a loaded event will be fired.
3. Render object. The final call, if you implemented the powerbi.load() function, is render(). It completes the last actions needed to render and show the embedded object to the user. A rendered event will be fired once the render has been completed.

Although the load and render functions must be used together, preload is independent of them. You can use the embed function to show the embedded object after preload. You can also use the full phased procedure by calling preload, load and render, respectively.