In jQuery Lazy Loading Scripts, I have explained how to lazy load JavaScript files using plugin jQuery Lazy Script.
Why to lazy load scripts ?
Page-speed also one of the major factor in SEO. If a webpage is loaded faster,then that page gets better SEO score. If a webpage has many JavaScript files, that take more time to load the page. So using jQuery AJAX we can load the script dynamically to reduce the page load time.
Where You can use this plugin ?
1). Lazy Load Facebook Like Button,Twitter share API and Google plus button, which will improve the page time.
2). Loading Comments (Disqus, Livefyre, Facebook) when page is scrolled or bottom of the page is visible.
Follow these steps for lazy loading scripts with jQuery
Step 1). Download jQuery Lazy script from Github
Step 2). Add jQuery and lazy Script in the head section of html page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.lazyscript.min.js" type="text/javascript"></script>
Step 3). Initialize the plugin when the document is ready.
var options = {
type: "scroll",
scripts: [
"http://connect.facebook.net/en_US/all.js#xfbml=1&appId=445577382175430",
"http://platform.twitter.com/widgets.js",
"https://apis.google.com/js/plusone.js"
],
success: function ()
{
FB.init({ status: true, cookie: true, xfbml: true });
}
};
$.lazyscript(options);
This plugin supports lazy types: scroll,visible,delay,hover,click.
scroll – scripts are loaded when the window is scrolled.
visible – scripts are loaded when a specific div is inside the view.
delay – scripts are loaded with a timeout
hover – scripts are loaded when use moves mouse over a div
click – scripts are loaded when user clicks on a div.
Putting All together. jQuery Lazy loading Social buttons example.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.lazyscript.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {
var options = {
type: "scroll",
scripts: [
"http://platform.twitter.com/widgets.js",
"http://connect.facebook.net/en_US/all.js#xfbml=1&appId=445577382175430",
"https://apis.google.com/js/plusone.js"
],
success: function () {
FB.init({ status: true, cookie: true, xfbml: true });
}
};
$.lazyscript(options);
});
</script>
</body>
</html>
Reference: Github
