Показать плагины facebook после их загрузки

Я создаю приложение в Angular 2 с помощью TypScript. Я внедрил некоторые из плагинов facebook на страницу. Теперь, когда я загружаю/перезагружаю страницу, они загружаются так медленно, и это занимает некоторое время после полной загрузки. Они загружаются по частям ... так, например, Плагин Facebook Страница показывает заголовок сначала, затем остальную часть плагина и так далее ... он выглядит уродливым, на мой взгляд. Есть ли способ, который я могу сделать некоторым слушателем и показать их после того, как они полностью загружены?Показать плагины facebook после их загрузки

Вот код (index.html с javascriptSDK facebook в):

<!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; 
      } 
     } 
    ); 
}

и реализации его в HTML с *ngIf="facebookLoaded" по тегам плагин моей facebook в. Есть ли подобный способ или любой способ сделать это?

Заранее спасибо.

источник

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);

и плагин HTML Facebook есть данные-атрибут уведомляет состояние, если вы можете использовать это также загрузки Вынесено с использованием в вышеуказанном состоянии вы можете попробовать css

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

источник

2016-10-06 03:39:55

CSS не работает должным образом, но абонент отлично поработал. Спасибо! –

Показать плагины facebook после их загрузки

ответ

Смежные вопросы