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.