typecho开启pjax后实现图片lazyload，刚开始使用placeholder，发现起不到作用，在图片请求后又变成placeholder的图片，再重新加载，起不到优化的作用。后采用ob_start() 函数开启页面缓冲区实现图片懒加载（lazyload），也是进行替换，感觉也不太好。于是研究了下typecho程序，小小修改几处实现图片lazyload。

首先，引入lazyload.js

在主题文件 footer.php 的 标签前添加如下代码：

//引入jquery
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
//引入lazyload
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
//lazyload设置图片显示方式
<script>$(function() {$("img").lazyload({effect: "fadeIn", threshold: 200});});</script>

其次，修改程序代码

1.修改文章内图片，打开Var/hyperdown.php第484-496行，将img的src=改成data-original=，改后源码如下：

    $text = preg_replace_callback(
        "/!\[((?:[^\]]|\\\\\]|\\\\\[)*?)\]\[((?:[^\]]|\\\\\]|\\\\\[)+?)\]/",
        function ($matches) use ($self) {
            $escaped = htmlspecialchars($self->escapeBracket($matches[1]));

            $result = isset( $self->_definitions[$matches[2]] ) ?
                "<img src="你的loading图片" data-original=\"{$self->_definitions[$matches[2]]}\" alt=\"{$escaped}\" title=\"{$escaped}\">"
                : $escaped;

            return $self->makeHolder($result);
        },
        $text
    );

我因为用到采取图片作为thumb图，故未设置src，直接空掉了。

2.修改评论头像，打开var/Widget/Abstract/comments.php第395-407行,将src=改成data-original=，然后添加src="你的loading图片"，修改后代码如下：

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="你的loading图片" data-original="' . $url . '" alt="' .
            $this->author . '" width="' . $size . '" height="' . $size . '" />';
        }
    }
}

3.修改后台评论管理，进入admin/Manage-comments.php，在最后加入

//引入jquery
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
//引入lazyload
<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
//lazyload设置图片显示方式
<script>$(function() {$("img").lazyload({effect: "fadeIn", threshold: 200});});</script>

最后，pjax开启后的lazyload回调

在主题文件footer.php的</body>标签前添加如下代码：

<script type="text/javascript">
$(document).on('pjax:complete', function() {//pjax回调
    $("img").lazyload({
    effect: "fadeIn",
    threshold: 200
    });
});
</script>

在ajax评论和ajax翻页回调成功后加入

$("img").lazyload({effect: "fadeIn", threshold: 200, failurelimit: 2});

比如：

    <script type="text/javascript">
        $(function() {
            url = $.ajax({
                type: "get",
                url: "img_url.txt",
                async: true,
                success: function() {
                    $("img").lazyload({effect: "fadeIn", threshold: 200, failurelimit: 2});
                }
            });
        });
    </script>

好了，大功告成！这样直接从源头实现图片lazyload，达到优化目的！