Open
Description
I want to lazy load Plotly from a CDN in my application, when required. When I dynamically create a <script> tag to fetch the CDN at runtime, the window.Ploty namespace is not populated.
- Is it possible to support this mechanism?
- Is there something I need to hook into with the initial page load?
Consuming CDN at application root
When I fetch plotly from a CDN via an html <script> tag added to my applications root. My chart render and work as expected. The file is fetched, initialized and the window.Plotly instance exists.
<!-- WORKS -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-2.24.3.min.js"></script> Consuming CDN with lazy load
However, if I want to lazy load the CDN by creating the <script> tag only when required. When I do this in typescript, the file is successfully fetched, but the window.Plotly namespace never gets populated:
/** DOES NOT WORK */
const init = (): void => {
const src = 'https://cdn.plot.ly/plotly-2.35.2.min.js';
const script: HTMLScriptElement = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onerror = (): void => {
console.error(`Error loading plotly.js library from ${src}`);
};
const head: HTMLHeadElement = document.getElementsByTagName('head')[0];
head.appendChild(script);
let counter = 200; // equivalent of 10 seconds...
// Checks if the plotly.js library is loaded by looking for the global Plotly variable.
const checkLoad = (): void => {
const plotly = (window as PlotlyWindow).Plotly;
if (plotly) {
// ready
// do something
} else if (counter > 0) {
// wait
counter--;
setTimeout(checkLoad, 50);
} else {
// expire
throw new Error(`Error loading plotly.js library from ${src}. Timeout.`);
}
};
checkLoad();
};