我网站上的 Twitter 关注按钮 - 无样式内容的闪现

Question

所以我想在页面上显示简单的关注按钮。很简单。

在我的 JS 文件中有：

window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
        t._e.push(f);
    };

    return t;
}(document, "script", "twitter-wjs"));

然后在 HTML 我有：

<a href="https://twitter.com/mattkomarnicki?ref_src=twsrc%5Etfw"
    class="twitter-follow-button"
    data-size="large"
    data-lang="en"
    data-show-count="true">Follow @mattkomarnicki</a>

一切正常，但因为按钮位于页面顶部（始终在初始视口区域内）。一旦我刷新页面（或第一次加载它）。我可以看到 FOUC。是否有任何类似事件的事件正在发出，以便我最初可以显示 none 并且当按钮 "is ready" 时我可以使其可见？

有什么提示吗？

Answer 1

您可以尝试使用来自 Twitter JS 的 rendered 事件 API:

twttr.events.bind(
  'rendered',
  function (event) {
    console.log("Created widget", event.target.id);
  }
);

来源：Twitter docs

我网站上的 Twitter 关注按钮 - 无样式内容的闪现

Twitter follow button on my website - Flash of Unstyled Content

javascript

css

twitter

fouc