加载后显示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插件

回答

相关问题