HTML5 prefetch / prerender with jQuery


/ Published in: jQuery
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. // create an object named "app" which we can define methods on
  2. var app = {
  3. // returns an array of each url to prefetch
  4. prefetchLinks: function(){
  5. // returns an array of each a.prefetch link's href
  6. var hrefs = $("a.prefetch").map(function(index, domElement){
  7. return $(this).attr("href");
  8. });
  9. // returns the array of hrefs without duplicates
  10. return $.unique(hrefs);
  11. },
  12.  
  13. // adds a link tag to the document head for each of prefetchLinks()
  14. addPrefetchTags: function(){
  15. // for each prefetchLinks() ...
  16. this.prefetchLinks().each(function(index,Element){
  17. // create a link element...
  18. $("<link />", {
  19. // with rel=prefetch and href=Element...
  20. rel: "prefetch", href: Element
  21. // and append it to the end of the document head
  22. }).appendTo("head");
  23. });
  24. },
  25. }
  26. // when the document is ready...
  27. jQuery(function(){
  28. // call the method we defined above.
  29. app.addPrefetchTags();
  30. }

URL: http://www.catswhocode.com/blog/mastering-html5-prefetching

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.