lazy loading of java script in php

Question

Hi,

I am using the Google visualization for drawing graphs into my website. This involves a lod of java script.

 <script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
 <script type="text/javascript">
 google.load('visualization', '1', {packages: ['annotatedtimeline']});
 </script>

These two lines of script takes at least 5 to 8 sec to load initially. How ever i use the graph feature in my website after sometime of the initial page load and not immediately. So i was wondering instead of slowing down the page load by 5 sex for the script to load can i do a lazy load of java script parallel to my page load. This will make my initial page load faster. Can this be done, if so please let me know syntax and also some link providing the documentation if any. Any kind of help is appreciated. Thanks in advance.

Answer 1

Put all the script tags immediately before the closing body tag as per this YSlow recommendation.

Answer 2

Put it as lower as you can at the page, meaning closer to the end tag. Your page will load all its contents before delaying further to load the JS.

Answer 3

You can also experiment with the DEFER attribute and placing the script tag into a separate head tag:

http://www.hunlock.com/blogs/Deferred_Javascript