typecho在pjax/ajax下实现图片lazyload懒加载

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,达到优化目的!