如果网站图片很多的话,一张1M ,100个请求就是并发带宽100M,导致网站加载慢,这个时候加上图片延迟加载,能有效的提升网站加载速度。
要实现图片延迟加载必须要把真实图片地址写在 data-original
属性。若src
和data-original
属性data-original相同,只是一个特效,并不能实现图片延迟加载。
实现图片延迟加载的标签
# Typecho标签
<img src="img/loading.png">
# lazyload标签
<img class="lazyload" src="img/loading.png" data-original="example.jpg">
这里看到typecho的图片输出标签,缺少date-original
标签,需要手动补全代码。本来想着使用JS实现,想着太麻烦。好奇的在全局搜索代码的时候,发现了相关的输出函数。
gravatar头像延迟加载
在var/Widget/Abstract/Comments.php
大概是395-408行
/**
* 调用gravatar输出用户头像
*
* @access public
* @param integer $size 头像尺寸
* @param string $default 默认输出头像
* @return void
*/
public function gravatar($size = 32, $default = NULL)
{
if ($this->options->commentsAvatar && 'comment' == $this->type) {
$rating = $this->options->commentsAvatarRating;
$this->pluginHandle(__CLASS__)->trigger($plugged)->gravatar($size, $rating, $default, $this);
if (!$plugged) {
$url = Typecho_Common::gravatarUrl($this->mail, $size, $rating, $default, $this->request->isSecure());
echo '<img class="avatar" src="' . $url . '" alt="' .
$this->author . '" width="' . $size . '" height="' . $size . '" />';
}
}
}
这里看到这段代码
<img class="avatar" src="' . $url . '" alt="' .$this->author . '" width="' . $size . '" height="' . $size . '" />
替换成
<img class="avatar" src="占位图地址" data-src="' . $url . '" alt="' .$this->author . '" width="' . $size . '" height="' . $size . '" />
img图片输出
在var/HyperDown.php
大概在484-496行
$text = preg_replace_callback(
"/!\[((?:[^\]]|\\\\\]|\\\\\[)*?)\]\[((?:[^\]]|\\\\\]|\\\\\[)+?)\]/",
function ($matches) use ($self) {
$escaped = htmlspecialchars($self->escapeBracket($matches[1]));
$result = isset( $self->_definitions[$matches[2]] ) ?
"<img src=\"{$self->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
: $escaped;
return $self->makeHolder($result);
},
$text
);
找到
<img src=\"{$self->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">
替换成
<img class="lazyload" src="占位图地址" data-src=\"{$self->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">
最新评论
我现在基本都不是用QQ了,电脑没装,手...
我成为了范例 😃
看起来很完美。
1ro.cn 还收不,怎么联系不到人
你的feed貌似有点问题。你看下。`v...
哈哈哈,路过。看到了