Search code examples
jqueryfacebookfacebook-like

How to load these facebook plugins on Dom Ready


They take so long to load, I want to do it after Dom loaded.

    <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/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      } (document, 'script', 'facebook-jssdk'));
    </script>
    <div class="fb-like" data-href="http://www.mywebsite.com<%=HttpContext.Current.Request.Url.AbsolutePath %>"
        data-send="false" data-width="450" data-show-faces="true">
    </div>

Solution

  • Just use the document ready event from jQuery

    $(document).ready(function(){
        //code here
    });
    

    Demo: http://jsfiddle.net/ZCcyy/

    Note that this will only wait until the dom is ready. If you want to load until the whole page is loaded including images use the window load event instead.

    $(window).load(function(){
        // code here
    });