如何加载此图表 javascript async？ (Tradingview 图表 api)

Question

My page speed is being damaged by the TradingView chart widget. TradingView 图表小部件损坏了我的页面速度。 I need to load the javascript async / defer.我需要加载 javascript 异步/延迟。 However, adding that to the script makes it disappear.但是，将其添加到脚本中会使它消失。

I use it for charts on this swedish page: https://cryptorunner.com/sv/hur-man-koper-bitcoin/我将它用于此瑞典页面上的图表： https : //cryptorunner.com/sv/hur-man-koper-bitcoin/

With this specific code in the wordpress editor:在 wordpress 编辑器中使用此特定代码：

 <div class="tradingview-widget-container"><script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script> <script type="text/javascript"> new TradingView.widget( { "autosize": true, "symbol": "BITFINEX:BTCUSD", "interval": "D", "timezone": "Etc/UTC", "theme": "Light", "style": "3", "locale": "sv_SE", "toolbar_bg": "#f1f3f6", "enable_publishing": false, "hide_top_toolbar": true, "hide_legend": true, "allow_symbol_change": true, "container_id": "tradingview_7589b" } ); </script></div>

You will find the code here:你会在这里找到代码：

https://uk.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/ https://uk.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/

I would really appreciate if someone could help me lazy load this chart.如果有人能帮我懒加载这张图表，我将不胜感激。 Any ideas why it doesn't work?任何想法为什么它不起作用？

Answer 1

You could try loading their script async and initate the chart once the whole page is fully loaded.您可以尝试异步加载他们的脚本并在整个页面完全加载后启动图表。

Vanilla/native JS minimal example from https://flippening.org/ :来自https://flippening.org/ 的香草/原生 JS 最小示例：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="tradingview-widget-container">
  <div id="tradingview_d2337"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/ETHBTC/?exchange=BINANCE" rel="noopener" target="_blank"><span class="blue-text">ETHBTC Rates</span></a> by TradingView</div>
</div>

</body>

<script type="text/javascript" src="https://s3.tradingview.com/tv.js" async></script>
<script type="text/javascript">
    window.onload = function(){
        new TradingView.MediumWidget(
        {
        "symbols": [
          [
            "BINANCE:ETHBTC|12M"
          ]
        ],
        "chartOnly": true,
        "width": 1000,
        "height": 400,
        "locale": "en",
        "colorTheme": "light",
        "gridLineColor": "rgba(240, 243, 250, 0)",
        "trendLineColor": "#2962FF",
        "fontColor": "#787B86",
        "underLineColor": "rgba(41, 98, 255, 0.3)",
        "underLineBottomColor": "rgba(41, 98, 255, 0)",
        "isTransparent": false,
        "autosize": false,
        "showFloatingTooltip": false,
        "container_id": "tradingview_d2337"
      }
        );
    };
</script>
</html>

But at some point, if you really want to optimize performance you cannot rely on a solution like tradingview.但是在某些时候，如果您真的想优化性能，则不能依赖于交易视图之类的解决方案。 They provide a free solution to millions of websites and load a bunch load of 3rd party code which will slow down your page.他们为数百万个网站提供免费解决方案，并加载大量第 3 方代码，这会减慢您的页面速度。

Either compare different options or do it yourself (minimal charts js library + your own data)要么比较不同的选项，要么自己做（最小图表js库+你自己的数据）

如何加载此图表 javascript async？ (Tradingview 图表 api)

问题描述

1 个解决方案

解决方案1
0 2021-08-16 18:32:33

如何加载此图表 javascript async？ (Tradingview 图表 api)

问题描述

1 个解决方案

解决方案1 0 2021-08-16 18:32:33

解决方案1
0 2021-08-16 18:32:33