加載後顯示facebook插件

我正在使用手稿在Angular 2中製作應用程序。我在頁面上實現了一些Facebook的插件。現在，當我加載/重新加載頁面時，它們的加載非常緩慢，並且在完全加載後需要一段時間。它們加載的部分......例如Facebook的頁面插件首先顯示標題，然後顯示插件的其餘部分，等等......在我看來，它看起來很醜。有沒有辦法讓一些監聽器在完全加載後顯示出來？加載後顯示facebook插件

下面是代碼（index.html的與facebook的javascriptSDK）：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>BLOG OLIFFFFFFKA</title> 
    <base href="/"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Prompt:300,200' rel='stylesheet' type='text/css'> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/png" href="http://localhost/OliwkaFinal/back/Images/default/favicon.png"> 

</head> 
<body> 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=1025977917520637"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<app-root><img class="loading-image" src="http://localhost/OliwkaFinal/back/Images/default/loading.gif"></app-root> 

</body> 
</html>

和例如app.component.ts（其Facebook頁面插件）：

<router-outlet></router-outlet> 

<div id="facebook-page-container" *ngIf="!fanpageClosed"> 
    <a (click)="closeFacebookFanpage()" class="pointer facebook-close-link"><span class="glyphicon glyphicon-remove"></span></a> 
    <div class="fb-page" 
     data-href="https://www.facebook.com/oliffffffka/" 
     data-tabs="timeline" 
     data-width="250" 
     data-height="420" 
     data-small-header="true" 
     data-adapt-container-width="true" 
     data-hide-cover="true" 
     data-show-facepile="true"> 
     <blockquote cite="https://www.facebook.com/oliffffffka/" class="fb-xfbml-parse-ignore"> 
      <a href="https://www.facebook.com/oliffffffka/">Oliffffffka</a> 
     </blockquote> 
    </div> 
</div>

我在想這樣的事情之一：

facebookLoaded = false; 

constructor(private _fbService: FacebookService) {} 

ngOnInit(){ 
    this._fbService.loaded().subscribe(
     response => { 
      if(response[state] == "loaded") { // OR true or whatever... 
       this.facebookLoaded = true; 
      } 
     } 
    ); 
}

與*ngIf="facebookLoaded"在我的Facebook的插件標籤實現它的HTML。有沒有類似的方式或任何方式來做到這一點？

預先感謝您。

來源

2016-09-28 Dawid Zbiński

從Facebook開發人員site

var finished_rendering = function() { 
console.log("finished rendering plugins"); 
} 
// In your onload handler 
FB.Event.subscribe('xfbml.render', finished_rendering);

和Facebook的插件HTML有通知的狀態，看看你能不能用也裝載渲染使用數據屬性上面的狀態你可以試試css

[fb-xfbml-state="rendered"]{ 
     display:block; 
    } 
    [fb-xfbml-state="parsed"]{ 
     display:none; 
    }

來源

2016-10-06 03:39:55

CSS無法按預期工作，但訂閱者工作得很好。謝謝！ –

加載後顯示facebook插件

回答

相關問題