"Web 2.0” applications aim at being more interactive by eliminating full page requests (and the flickering of pages between requests).
Ever since google released GMail this has been all the hype amongst web developers.
Even though this overcomes one of the usability problems we currently have with web applications, I think the biggest usability problem still remains the 1-2 second wait for a response from the server after clicking.
Hence, a silly idea I had…: What if hyperlinks would preload their target?
When browsing pages in content-centric environments you could easily use the time in between reading and clicking on a hyperlink to load the page someone navigates to on its next click. Even though preloading all links doesn’t seem like a good idea, preloading the 5 most possible succeeding pages would decrease the average wait time significantly.
Imagine a wiki that preloads the referred pages from the current entry.
…Or a searchengine that preloads the first 5 search results?
…Or a weblog engine that preloads linked pages?
Preloading rules could also be based on log file analysis, to reflect a common usage pattern or be hard coded into the html.
Below is a little example implementation that preloads all hyperlinks that have an attribute called “PreLoad” set to “true” (for example: <a href="NextPage.aspx" PreLoad="true" />). The code below might have some side effects for pages that otherwise rely on javascript (which should be easily overcome) but should give you a view on how what I meant.
<script type="text/javascript">
Function.prototype.ExecuteWhenHttpRequestFinished=function(HttpReq, Object) {
var r=HttpReq;
var t=this;
var o=Object;
return function() {
if (r.readyState == 4 && r.status == 200)
t(r, o);
}
}
function PreLoadHyperlinks() {
var linksCollection = document.getElementsByTagName("a");
for(i=0; i<linksCollection.length; i++){
if (linksCollection[i].getAttribute("PreLoad") == "true") {
new LinkLoader(linksCollection[i]).PreLoadTarget();
}
}
}
function GetHttpRequest() {
try {
return new XMLHttpRequest();
} catch(e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) { }
}
}
function LinkLoader(hyperlink) {
this.Hyperlink = hyperlink;
this.PreLoadTarget=function() {
var HttpReq = GetHttpRequest();
HttpReq.open("GET", this.Hyperlink.href, true);
HttpReq.onreadystatechange = this.BufferDocument.ExecuteWhenHttpRequestFinished(HttpReq, this.Hyperlink);
HttpReq.send("");
}
this.BufferDocument=function(HttpReq, Object) {
Object.targetDocument = HttpReq.responseText;
Object.href="#";
Object.onclick = function(){
document.body.innerHTML = this.targetDocument;
PreLoadHyperlinks();
}
}
}
window.onload = PreLoadHyperlinks;
</script>