ご存じのとおり、Facebook の「いいね!」ボタンの読み込みは非常に遅くなります。
そして、ボタンの読み込みが完了してウェブサイトに追加されたことを検出する方法を見つけようとしています。
その理由は、読み込みアニメーションを表示してから非表示にしてボタンを表示するためですが、読み込みが完了したらボタンを表示したいのです。
これはできますか?
よろしくお願いします!
ご存じのとおり、Facebook の「いいね!」ボタンの読み込みは非常に遅くなります。
そして、ボタンの読み込みが完了してウェブサイトに追加されたことを検出する方法を見つけようとしています。
その理由は、読み込みアニメーションを表示してから非表示にしてボタンを表示するためですが、読み込みが完了したらボタンを表示したいのです。
これはできますか?
よろしくお願いします!
xfbml.render イベントをサブスクライブして、レンダリングが完了したときに通知を受け取ることができます。これは、ページの解析ごとに 1 回だけ発生します (xfbml だけでなく、新しい html5 トリックでも機能します)。FB JS SDK が読み込まれると、ページの解析が自動的に行われますxfbml : true
。
window.fbAsyncInit = function() {
FB.init({
...
xfbml : true
});
FB.Event.subscribe('xfbml.render', function(response) {
alert('OMG... All Facebook sociaal plugins on page rendereed.... finally!');
});
};
// And load the SDK Asynchronously here
FacebookのいいねボタンがiFrameでラップされていると確信しています。そうであれば、そのiFrameを参照して使用するものを見つけることができます->
$('iframe[class/id/name=whatever]').load(function(){
//This element is loaded
});
編集
特定のニーズに基づいて、私のコメントで述べたように、任意の属性にフックできます。私は単にframeborder="0"
フックすることを選択します。
$('iframe[frameborder=0]').load(function(){
alert("loaded.");
});
Facebook ウィジェットを動的に追加してFB.XFBML.parseを手動で呼び出す場合は、レンダリングが完了したときに呼び出されるコールバック関数を指定するだけです。