Lazy Loading Plotly from CDN does not populate the `window.Plotly` namespace
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 18.3k
- Fork
- 2k
- Merge trung bình
- 2 ngày 12 giờ
- Pull request đã merge (30 ngày)
- 28
Mô tả
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();
};
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Không có tệp repository hoặc test nào được nêu tên. Hãy tái hiện script root đang hoạt động và script được thêm động trong trình duyệt bằng các phiên bản Plotly được báo cáo, sau đó kiểm tra việc tải script và quá trình khởi tạo window.Plotly. Hoàn tất nghĩa là xác định lazy loading có được hỗ trợ hay không và ghi lại hoặc sửa hành vi đó bằng một regression check.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, typescript
- Lĩnh vực
- data-visualization, frontend, web-dev
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 28/100