Phased loading of embedded content in Power BI Embedded

The loading of an embedded artifact in Power BI Embedded is done through an embed call that contains an embedded configuration object and the <div> element that contains iframe. After the embedded object is called, it's 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 applications that host several embedded reports. A ready event is fired after the preload is 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. After the load is completed, a loaded event is 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 is fired after the render is 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.