Posted By

rydaly on 09/15/11

Tagged

jquery
html5

Versions (?)

Last Edited at 09/15/11 01:38am

Statistics

Viewed 1461 times

Favorited by 0 user(s)

Related snippets

HTML5 prefetch / prerender with jQuery

/ Published in: jQuery

//#########################################################################
//
// *taken from http://www.catswhocode.com/blog/mastering-html5-prefetching
//
//#########################################################################

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

// create an object named "app" which we can define methods on
var app = {
    // returns an array of each url to prefetch
    prefetchLinks: function(){
        // returns an array of each a.prefetch link's href
        var hrefs = $("a.prefetch").map(function(index, domElement){
            return $(this).attr("href");
        });
        // returns the array of hrefs without duplicates
        return $.unique(hrefs);
    },
 
    // adds a link tag to the document head for each of prefetchLinks()
    addPrefetchTags: function(){
        // for each prefetchLinks() ...
        this.prefetchLinks().each(function(index,Element){
            // create a link element...
            $("<link />", {
                // with rel=prefetch and href=Element...
                rel: "prefetch", href: Element
                // and append it to the end of the document head
            }).appendTo("head");
        });
    },
}
// when the document is ready...
jQuery(function(){
  // call the method we defined above.
    app.addPrefetchTags();
}