1

TradingView 图表小部件损坏了我的页面速度。我需要加载 javascript 异步/延迟。但是，将其添加到脚本中会使它消失。

我将它用于此瑞典页面上的图表：https ://cryptorunner.com/sv/hur-man-koper-bitcoin/

在 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>

您将在此处找到代码：

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

如果有人可以帮助我延迟加载此图表，我将不胜感激。任何想法为什么它不起作用？

4

1 回答 1

0

您可以尝试异步加载他们的脚本并在整个页面完全加载后启动图表。

来自https://flippening.org/的 Vanilla/native 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>

但在某些时候，如果你真的想优化性能，你不能依赖像 tradingview 这样的解决方案。他们为数百万个网站提供免费解决方案，并加载大量第三方代码，这会减慢您的页面速度。

比较不同的选项或自己做（最小图表 js 库 + 您自己的数据）

于 2021-08-16T18:32:33.857 回答