Firefox linux Android apache Windows google HTML5 程序员 centos 开源 php linux命令 wordpress java mysql Python shell 微软 nginx Ubuntu

WordPress实现HTML5预加载功能

HTML5对link的rel属性添加N多值,其中最有用的就是预加载功能了。它比网上提到图片预加载有时不同,它的加载时机是由浏览器决定的,只有在空闲时间才偷偷加载指定资源,防止一下子加载这么多东西把页面卡死。

下面是MDC的说明

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache.

WordPress实现HTML5预加载方法很简单,把下面代码:

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

加到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(); ?>"> <!-- Firefox -->
<link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>"> <!-- Chrome -->
<?php } elseif (is_singular()) { ?>
<link rel="prefetch" href="<?php bloginfo('home'); ?>"> <!-- Firefox -->
<link rel="prerender" href="<?php bloginfo('home'); ?>"> <!-- Chrome -->
<?php } ?>

由于预加载是HTML5的一部分,目前并不是所有浏览器都支持,比如:Internet Explorer就不行了。而Firefox、chrome和opera支持该技术。因此如果访问者的浏览器不支持预加载,将什么效果也没有。

至于真的有什么实际效果只能自己去体会了。

延伸阅读

评论