This is probably simply a personal taste, but I hate putting External
JavaScript tags in the body of a web page. It feels and looks very unsightly to me. But as I learn more
and more JavaScript, and really start to get a feel for the small language, I’ve realized that I don’t have
to. That it’d be just as easy to place them directly into the header after the page is ready, by
manipulating the DOM. Here is an excerpt from the beta turled website.
[codesyntax
lang="javascript"]$(document).ready(function() {
// Google Analytics
var gaJsHost =
(("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
var script =
document.createElement("script");
script.src = gaJsHost + "google-analytics.com/ga.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
try
{
var pageTracker = _gat._getTracker("CENSORED");
pageTracker._trackPageview();
} catch(err) { /* Do Nothing. */ }
//
Facebook Share
var script = document.createElement("script");
script.src =
"http://static.ak.fbcdn.net/connect.php/js/FB.Share";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
});[/codesyntax]
As
you can see, I wait until the document is loaded using jQuery’s ready method, and then create elements for
both Google Analytics and Facebook Share, before appending them directly to the <head> of the
website. Keeping the code clean, reducing bandwidth usage for non-JavaScript users, and even making
Google’s code cleaner. (By changing Google Analytic’s default code from document.write to DOM Manipulation.
So,
Never again will I feel the need to insert external script tags at the bottom of the <body>
just so that the rest of the page loads before them.
Note:
If you’re not using jQuery, document.onload = function() { /* Code */ } works just as well, I promise.
No comments:
Post a Comment