Controlling when Flourish graphics load

The window.Flourish object

If you want more control over how Flourish graphics are embedded into your page, you can set a global Flourish variable before loading the script:

<script>
window.Flourish = {};
</script>
<script src="https://public.flourish.studio/resources/embed.js"></script>

This object is used to configure how graphics are loaded. Also, if it is present, the embed script will add functions to the object to allow you to control and communicate with the Flourish graphics.

By default, the embed script will process all the .flourish-embed placeholders when it loads – or when the DOMContentLoaded event fires, if the script is loaded before the document is ready. When a placeholder is processed, an <iframe> element is created inside the placeholder

It is possible to disable this default behaviour by setting the disable_autoload property to true in [the window.Flourish object:

<script>
window.Flourish = { disable_autoload: true };
</script>
<script src="https://public.flourish.studio/resources/embed.js"></script>

If you create a global Flourish object in the context of your document before loading the embed script, then a function Flourish.loadEmbed(placeholder_element) will be added to your Flourish object. This function can be called at any time to load a particular Flourish graphic. This is useful if you are loading Flourish graphics dynamically, for example. The function argument is a DOM element representing a .flourish-embed placeholder, and the Flourish.loadEmbed function will create an iframe inside the placeholder that references the graphic.