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

作者 : 阿灿 本文共2460个字,预计阅读时间需要7分钟 发布时间: 2020-12-6 共115人阅读

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,达到优化目的!
爱搜社,一个专注收集和分享网络源码资源的网站,建站辅导首选爱搜社
爱搜社 » typecho在pjax/ajax下实现图片lazyload懒加载

常见问题FAQ

如何通过本站投稿资源与作品?
本站为开放式资源共享平台,用户可通过后台或者联系站长进行发稿,同时可设置为收费作品,平台将收取百分之十的手续费,作品不得发布违禁,违法内容与广告,如被查出有关于黄赌毒等违法内容,平台将永久封禁帐号,并配合公安机关提供用户信息!
下载后的资源如何使用?
本站所有资源来源于网络,资源的使用一般附带在文章中,如果依旧不会使用 请联系作者或者寻求度娘帮助
免费下载或者VIP会员专享资源能否直接商用?
本站所有资源均来自互联网仅供学习,版权属于原作者所有!本站所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。如有侵权请联系Email:85136926@qq.com 并附上相关证明 24小时内给予删除!