我的网站上的Twitter关注按钮-未样式化内容的闪烁

问题描述 投票:0回答:2

所以我只想在页面上显示跟随按钮。非常简单。

在我的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,并且当按钮“就绪”时,我可以使其可见?

enter image description here

有任何提示吗?

javascript css twitter fouc
2个回答
0
投票

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

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

来源:Twitter docs


0
投票

您可以尝试

document.onload = function ...

甚至

window.onload = function ...
© www.soinside.com 2019 - 2024. All rights reserved.