为博客添加了HTML5预加载功能

12月21日 · 2011年

HTML5对link的rel属性添加了N多值,其中最有用的就是预加载功能了。它可以大幅度提高网站加载时间以及打开速度。所谓的预加载就是在网页全部加载之前,对一些主要内容进行加载,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,直到所有内容加载完毕。它比网上提到图片预加载有时不同,它的加载时机是由浏览器决定的,只有在空闲时间才偷偷加载指定资源,防止一下子加载这么多东西把页面卡死。

HTML5预加载是不只限于HTML页面的,还可以是图片,JS等资源。这对于我们加快页面载入速度非常有帮助。如今该功能在Wordpress中也可以实现了。针对Wordpress博客,实现HTML5预加载的方法很简单,把下面的代码加到模版文件header.php的<head>和</head>之间即可。

<?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 } ?>

还可以根据自己的需要对上面的代码进行适当的修改,例如加个判断预读首页等。

<?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'); ?>">
<?php } ?>

由于预加载是HTML5的一部分,目前并不是所有浏览器都支持,比如:Internet Explorer就不行了。而Firefox、chrome和opera支持该技术。因此如果访问者的浏览器不支持预加载,将什么效果也没有。如果你希望IE也支持的话,那么就需要一个JS来辅助实现。当然,前提是你不在意多加载一个js文件。。。

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]–>

各位站长可以试一试,看是不是对页面的载入速度有了改善。现在我基本都是用chrome核心的浏览器了,IE好像很久都不用了。但是完全放弃IE又不可能,至于怎么取舍就看大家了。。。

4 条回应
验证码
输入运算符及数字使等式成立
{{comment.validate_num1}} = {{comment.validate_num2}}
点赞 确定
退出登录?
取消 确定
  1. 合格1232012-5-26 · 10:42

    这样的功能的确不错,我的typecho不知道怎么回事,很慢

    • 猴猴2012-5-27 · 10:48

      也许是网络的原因?

  2. 陌凡2011-12-22 · 20:24

    博客打开好快,学习一下,对代码不是很懂 :grie:

    • 猴猴2011-12-22 · 20:53

      我对代码也不咋懂,很多都是看别人的。还是得靠自己学习啊 😉