我网站上的 Twitter 关注按钮 - 无样式内容的 Flash
Posted
技术标签:
【中文标题】我网站上的 Twitter 关注按钮 - 无样式内容的 Flash【英文标题】:Twitter follow button on my website - Flash of Unstyled Content 【发布时间】:2020-07-03 07:52:38 【问题描述】:所以我想在页面上显示简单的关注按钮。很简单。
在我的 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
并且当按钮“准备就绪”时我可以使其可见?
有什么提示吗?
【问题讨论】:
【参考方案1】:您可以尝试使用 Twitter JS API 中的 rendered
事件:
twttr.events.bind(
'rendered',
function (event)
console.log("Created widget", event.target.id);
);
来源:Twitter docs
【讨论】:
以上是关于我网站上的 Twitter 关注按钮 - 无样式内容的 Flash的主要内容,如果未能解决你的问题,请参考以下文章