title: Show loading message before facebook like box loaded completely
body: <p>Any simple way to show loading icon or message until loading Facebook like box on page. </p>
  
  <p>And hide message/icon after like box completely loaded on page.</p>
  
  <p><strong>Snap:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/rMAhU.jpg" alt="enter image description here"></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;(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/en_US/all.js#xfbml=1&amp;appId=488390501239538";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  function TakePreview()
  {
      jQuery('#loadingmsg').show();
      location.href = location.href;
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="previewfanbox"&gt;
  
    &lt;strong&gt;Fanbox Widget Preview&lt;/strong&gt;&lt;br&gt;
    &lt;p id="loadingmsg" style="display:none;"&gt;Loading Like Box, please wait...&lt;/p&gt;
  
    &lt;div class="fb-like-box" data-href="https://www.facebook.com/FacebookDevelopers" data-width="292" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
      &lt;input name="takepreview" id="takepreview" class="button" type="button" value="Refresh Preview" onclick="return TakePreview();"&gt;&lt;br&gt;
  </code></pre>
  
  <p>So, please suggest me a simple way <strong>or</strong> any other way to achieve this. Thanks mates!</p>