Question

我正在使用Typescript在Angular 2中制作应用程序。我已经在网页上实现了一些facebook的插件。现在，当我加载/重新加载页面时，它们的加载速度非常慢，并且在完全加载后需要一段时间。它们装在零件中...所以例如Facebook页面插件首先显示标题，然后是插件的其余部分，依此类推......在我看来它看起来很难看。有没有办法可以让一些听众在他们完全装满后展示他们？

以下是代码（index.html与facebook＆＃39; 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"在HTML中实现它。是否有类似的方式或任何方式来做到这一点？

提前谢谢。

Answer 1

来自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; }

在他们重新加载后显示facebook插件

1 个答案: