利用HTML5实现页面预加载

利用HTML5实现页面预加载
十二月 8th, 2011 作者:Robin 发表于:网站建设, 速度优化  773 次浏览 5 Comments »
这个功能只在firefox,chrome或者opera浏览器下才有作用，IE的话没就没任何效果。再次BS一下IE。

Robin实验了一下，效果非常明显。

在chrome浏览器下进入单篇文章时，浏览器会自动预加载上一篇文章、下一篇文章以及博客首页。
当点击链接进入上一篇或者下一篇或者首页时，几乎是瞬开，毫无延迟。真是大赞！不信的话可以测试一下。

使用这个预加载的方法很简单，只要在

标签中加入link标签，并使用prefetch及preender属性即可。
例如以下代码就可以实现在单篇文章内自动预加载上下篇文章及首页，在page页自动加载下一页:

 
<?php if (is_archive() && ($paged > 1) && ($paged < $wp_query->max_num_pages)) { ?> 
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>"> 
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>"> 
<?php } elseif (is_singular()) { ?> 
<link rel="prefetch" href="<?php bloginfo('home'); ?>"> 
<link rel="prerender" href="<?php bloginfo('home'); ?>">
<link rel="prefetch" href="<?php echo get_permalink(get_next_post(false,'')); ?>"> 
<link rel="prerender" href="<?php echo get_permalink(get_next_post(false,'')); ?>"> 
<link rel="prefetch" href="<?php echo get_permalink(get_previous_post(false,'')); ?>"> 
<link rel="prerender" href="<?php echo get_permalink(get_previous_post(false,'')); ?>">
<?php } ?>

 

原始文章来自：Mastering HTML5 Prefetching
Robin在此基础上做了一些修改，实现上下文预加载。

除非注明，Robin的文章均为原创，转载请注明作者和出处。
本文链接地址: http://robin.sh/html/494_html5-prefetch-prerender.html