Lazy Loading Plotly from CDN does not populate the `window.Plotly` namespace
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 18.3k
- 派生
- 2k
- 平均合并
- 2 天 12 小时
- 30 天内合并 PR
- 28
描述
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();
};
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
未指定任何仓库文件或测试。使用报告中的 Plotly 版本,在浏览器中复现正常工作的根脚本和动态追加的脚本,然后检查脚本加载以及 window.Plotly 初始化。完成的标准是确定是否支持延迟加载,并通过回归检查记录或修正该行为。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, typescript
- 领域
- data-visualization, frontend, web-dev
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 需要澄清
- 新手友好度
- 28/100