I have social media icons from sharethis on my site. In order to prevent the sharethis button.js from render blocking, I made use of a lazyload js plugin http://blog.akademy.co.uk/2013/05/controlling-javascript-with-lazyload-a-sharethis-example/.
It works perfectly but I have one more requirement.
I want this plugin to lazyload the button.js somewhere towards the end of tag. Currently it places it in the tag.
Can someone help?
Here is my code sample:
//Calling the jquery plugin
<script type="text/javascript" src="lazyload-min.js" defer="on" async="on">
</script>
Somewhere near the end of the tag I have used this code:
<script type="text/javascript">
window.onload = function() {
var switchTo5x=false;
LazyLoad.js( 'http://w.sharethis.com/button/buttons.js', function () {
stLight.options(
{ publisher: "YOUR-UUID", doNotHash: true, doNotCopy: true }
);
});
}
</script>
I found a workaround for this problem.
We do not need to make use of lazyload.js plugin.
We can simply defer load the sharethis button.js after downloading it on our server and pass the parameters in the callback function.
Here is the code sample: