Lazy Loading Plotly from CDN does not populate the `window.Plotly` namespace
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 18.3k
- Forks
- 2k
- Ø Merge
- 2 T. 12 Std.
- Gemergte PRs (30 T.)
- 28
Beschreibung
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();
};
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Keine Repository-Datei oder kein Test ist benannt. Reproduziere das funktionierende Root-Skript und das dynamisch angehängte Skript in einem Browser unter Verwendung der gemeldeten Plotly-Versionen und überprüfe anschließend das Laden der Skripte und die Initialisierung von window.Plotly. Als abgeschlossen gilt, festzustellen, ob Lazy Loading unterstützt wird, und das Verhalten mit einem Regressionstest zu dokumentieren oder zu korrigieren.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, typescript
- Bereich
- data-visualization, frontend, web-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 28/100