Wednesday, January 01, 2014

How to defer loading of javascript efficiently using the Google way?

If there is a piece of code that is intended to be loaded after a webpage finishes loading, one efficient method as recommended by Google is to use listeners. An article on feedthebot illustrates the Google's method. The following code should be placed in your HTML just before the </body> tag. Also, all code blocks supposed to be delayed are to be placed in an external js file (defer.js in this case).

<script type="text/javascript">
function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else
    window.onload = downloadJSAtOnload;
</script>

No comments:

Post a Comment

Do provide your constructive comment. I appreciate that.