Ajax Load/insert bloack after page render.

Permalink October 10, 2013 at 5:51 AM

Hi team

I have been trying to speed up a small site i have made. My problem is the customer wants the like/pinit/linked in Buttons on his site. How ever when i add these their are so many slow requests to facebook/google etc for all their required js files etc.

I know their is an add on for Ajax loading on the market, But I was attempting to add this manually as, I have a few sites where this will speed up the site load.

I have a Block on page which i added the social block 2.

<head>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $("#content").load("/elements/include.php");
});
</script>

<div id="headersearch-area">
<div id="content"></div>
      </div>

In the include file i simply have 1 line.

<?php $ah = new GlobalArea('Search');$ah->display($c);?>

Can any one tell me if I am even close?

Now whats strange is it doesn't load the block but still does all the calls like... widgets.js platform.twitter.com/ etc...

Regards
Carl

sk01 replied on Oct 11, 2013 at 11:01 am Permalink Reply

hi,

as long as your include-file is not part of your C5, this will not work, as the GlobalArea call would be executed outside of C5.

you could try loading the scripts on document ready instead of the head.

$(document).ready(function() {
  var url = http://url_to_the_script;
  var script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', url);
  document.getElementsByTagName('head')[0].appendChild(script);
});