技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> Typecho HTML5预加载

Typecho HTML5预加载

浏览:1193次  出处信息

天下文章一大抄，你通过搜索引擎搜索 HTML5预加载，估计只能找到诸如“ WP实现HTML5预加载”的方法。
不知道的还以为只有WP可以实现HTML5预加载呢~
火狐下引入的预加载使用方法
<link rel="prefetch" href="http://www.example.com/">

文档 http://en.wikipedia.org/wiki/Link_prefetching
谷歌下预加载使用方法
<link rel="prerender" href="http://example.org/index.html">

文档https://developers.google.com/chrome/whitepapers/prerender

代码如下：

<!-[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]->
<?php if ($this->is('index')): ?><!-- 页面为首页时 -->
<link rel="prefetch" href="<?php $this->options->siteUrl(); ?>"> <!-- firefox -->
<link rel="prerender" href="<?php $this->options->siteUrl(); ?>"> <!-- chrome -->
	<?php elseif ($this->is('post')): ?><!-- 页面为文章单页时 -->
<link rel="prefetch" href="<?php $this->permalink() ?>"> <!-- firefox -->
<link rel="prerender" href="<?php $this->permalink() ?>"> <!-- chrome -->
	<?php else: ?><!-- 页面为其他页时 -->
	<!-- 啥都木有 -->
	<?php endif; ?>

 

上面的代码有错误。

我仔细查找了国外的一些文档。

例如 客户正在阅读 http://henmang.net/DNSprefetching.cgi ，我们这里认为这是第一篇文章
那么 客户很可能会去阅读 http://henmang.net/html5prefetch.cgi 我们认为这是第二篇文章。

也就是我们post中的上一页下一页。

因此，我们假设当前页面为B，上一页为A，下一页为C

我们需要插入代码
<link rel="prefetch" href="A"> <!-- firefox -->
<link rel="prerender" href="A"> <!-- chrome -->
<link rel="prefetch" href="C"> <!-- firefox -->
<link rel="prerender" href="C"> <!-- chrome -->

那么，在客户访问B页面的时候，浏览器会偷偷的加载 A和C的页面，如果索性客户点击了A和B页面，就是秒开了。。。

但是我并不知道这个功能会不会降低 B页面的速度，如果会降低，显然是没有任何意义的，反而起了反作用。

如果一定要做

首页，预加载 最新一片日志

文章页 ，预加载 上一页和下一页。

因为考虑到效率等问题，做了下舍取，我只在post做预加载。

代码如下，分为2部分

第一部分，将以下代码加入functions.php ，代码来自 http://jakc.net/post/444 有修改

<?php
function xmPrevNext($method,$t,$isLink) 
        { 
        $xdb = Typecho_Db::get();       
        switch($method){ 
            case "pre": 
                $xrs = $xdb->fetchRow($xdb->select()->from('table.contents')    
                    ->where('table.contents.created < ?', $t->created) 
                    ->where('table.contents.status = ?', 'publish') 
                    ->where('table.contents.type = ?', $t->type) 
                    ->where('table.contents.password IS NULL') 
                    ->order('table.contents.created', Typecho_Db::SORT_DESC) 
                    ->limit(1)); 
                 if(sizeof($xrs)==0){ 
                    switch($isLink){ 
                        case 0: 
                            echo "这已经是第一篇了亲~"; 
                            break; 
                        case 1: 
                            echo "http://henmang.net";  //注意把这里修改为你本人的网址
                            break; 
                    } 
                 } 
                break; 
            case 'next': 
                $xrs = $xdb->fetchRow($xdb->select()->from('table.contents')    
                    ->where('table.contents.created > ?',$t->created) 
                    ->where('table.contents.status = ?', 'publish') 
                    ->where('table.contents.type = ?', $t->type) 
                    ->where('table.contents.password IS NULL') 
                    ->order('table.contents.created', Typecho_Db::SORT_ASC) 
                    ->limit(1)); 
                    if(sizeof($xrs)==0){ 
                    switch($isLink){ 
                        case 0: 
                            echo "木有下一篇了~"; 
                            break; 
                        case 1: 
                            echo "http://henmang.net";  //注意把这里修改为你本人的网址
                            break; 
                    } 
                 } 
                break; 
        } 
            if($xrs){ 
            $xrs = $t->filter($xrs); 
            if($isLink==0){ 
                echo $xrs['title']; 
            }else{ 
                echo $xrs['permalink']; 
                } 
            } 
        }

然后在header.php加入

<?php if ($this->is('post')): ?>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]->
<link rel="prefetch" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- firefox -->
<link rel="prefetch" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- firefox -->
<link rel="prerender" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- chrome -->
<link rel="prerender" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- chrome -->
<?php endif; ?>

如果你一定要在首页预加载第一篇日志，可以试试下面的代码，很蛋疼

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]->
<?php if ($this->is('index')): ?><!-- 页面为首页时 -->
<link rel="prefetch" href="<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=1')->parse('{permalink}'); ?>"> <!-- firefox -->
<link rel="prerender" href="<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=1')->parse('{permalink}'); ?>"> <!-- chrome -->
	<?php elseif ($this->is('post')): ?><!-- 页面为文章单页时 -->
<link rel="prefetch" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- firefox -->
<link rel="prefetch" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- firefox -->
<link rel="prerender" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- chrome -->
<link rel="prerender" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- chrome -->
	<?php else: ?><!-- 页面为其他页时 -->
	<!-- 啥都木有 -->
	<?php endif; ?>

建议继续学习：

  1. js实现预加载图片让图片快速显示    (阅读：4820)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：使用Javascript获取页面所在目录的绝对路径
后一篇：DNS Prefetching 技术引入及实现方法 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1