Lazy Loading Plotly from CDN does not populate the `window.Plotly` namespace
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
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();
};
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No repository file or test is named. Reproduce the working root script and the dynamically appended script in a browser using the reported Plotly versions, then inspect script loading and window.Plotly initialization. Done means identifying whether lazy loading is supported and documenting or correcting the behavior with a regression check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100