WordPress实现HTML5预加载与加载原理
2013-09-05 20:06
736 查看
虽然在国内html5技术使用的网站还很少,但也有不少朋友开始做html5网站了,下面我来给大家介绍WordPress实现HTML5预加载与加载原理吧,有需要了解的朋友可进入参考HTML5预加载原理
,这里简单的写一下原理
同时也把原理放出,这个方法的关键在于link rel=”xx”这里,rel属性在html5发生
了变化,所以可以使用它来实现预加载,这里贴出rel在html4.01和html5的值供参考.
linkrel
html5-rel
HTML 4.01 与 HTML 5 之间的差异
已删除的值:appendix, chapter, contents, copyright, glossary, index, section, start, subsection
新值:archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, pingback, search, sidebar, tag, up
实例代码
利用html5赋予link rel属性的新属性prefetch-规定应该对目标文档进行缓存这个值,动手
来为你的wordpress博客实现预加载吧.
实现的方法很简单,在你当前的主题模板的header.php(头部模板)加入如下代码即可
提示:你可以先修改部分代码再运行。
就是这么简单,当然,由于预加载是HTML5的一部分,目前并不是所有浏览器都支持,比
如:Internet Explorer就不行了。而Firefox、chrome和opera支持该技术。因此如果
访问者的浏览器不支持预加载,将什么效果也没有。如果你希望IE也支持的话,那么就
需要一个JS来辅助实现.
提示:你可以先修改部分代码再运行。
也是很简单,把这段代码也放进去就可以了,调用某个高手放在Google code project上
并允许大家直接调用的.当然,前提是你不在意调用额外的文件。
,这里简单的写一下原理
同时也把原理放出,这个方法的关键在于link rel=”xx”这里,rel属性在html5发生
了变化,所以可以使用它来实现预加载,这里贴出rel在html4.01和html5的值供参考.
linkrel
html5-rel
HTML 4.01 与 HTML 5 之间的差异
已删除的值:appendix, chapter, contents, copyright, glossary, index, section, start, subsection
新值:archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, pingback, search, sidebar, tag, up
实例代码
利用html5赋予link rel属性的新属性prefetch-规定应该对目标文档进行缓存这个值,动手
来为你的wordpress博客实现预加载吧.
实现的方法很简单,在你当前的主题模板的header.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来辅助实现.
<!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”> </script> <![endif]–>
提示:你可以先修改部分代码再运行。
也是很简单,把这段代码也放进去就可以了,调用某个高手放在Google code project上
并允许大家直接调用的.当然,前提是你不在意调用额外的文件。
相关文章推荐
- WordPress实现HTML5预加载与加载原理
- 黄聪:WordPress实现HTML5预加载
- WordPress实现HTML5预加载
- 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
- HTML5离线存储原理及实现
- 关于浏览器对HTML5的离线储存资源的管理和加载原理
- cocos2d-android - 1.地图动态加载原理(世界地图的实现)
- WordPress插件机制实现原理
- JS实现无限分页加载——原理图解
- 架设wordpress,,,,说明什么是插件?什么是主题?背后的实现原理是什么?试用至少10个插件及三个主题,并说明其用途与配置过程
- 图片延迟加载(lazyload)的实现原理
- web前端图片懒加载实现原理
- HTML5 五彩圆环Loading加载动画实现教程
- Android中apk加固完善篇之内存加载dex方案实现原理(不落地方式加载)
- 下拉刷新、上拉加载更多控件实现原理及解析(一)
- Android中apk加固完善篇之内存加载dex方案实现原理(不落地方式加载)
- ThreadLocal的实现原理,及使用实例,解决spring,hibernate非web项目下的懒加载 no session or session was closed(1)!
- 基于HTML5树组件延迟加载技术实现
- HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影