EyouCMS文章图片懒加载

我们浏览有大图片文章的时候存在体验不友好的情况,图片懒加载可以很好的弥补这一问题。出于移动端轻量化的考虑,本案例不用jquery,使用更为小巧的LazyLoad.min.js,插件自己百度下载,下面开始eyou文章懒加载的具体优化使用。

1、找到application/function.php添加自定义文章内容输出方法

if (!function_exists('lazy_msubstr')) 
{
    function lazy_msubstr($content='') {
        if (!empty($content)) {
            preg_match_all('/<img.*(\/)?>/iUs', $content, $imginfo);
            $imginfo = !empty($imginfo[0]) ? $imginfo[0] : [];
            if (!empty($imginfo)) {
                foreach ($imginfo as $key => $imgstr) {
                    $imgstrNew = $imgstr;
                    if(false !== strpos($imgstrNew, 'data-original')) {
                        return $imgstrNew;
                    }
                    $mytemplate = \think\Config::get('template.view_path');
                    $loading = $mytemplate.'images/xdunz.jpg';  //改成你默认显示的图片,可以是gif旋转动画图片,这里是放在模板images文件夹里

                    //判断img标签是否有class
                    if (!preg_match('/class/i', $imgstrNew)) {
                        $imgstrNew = preg_replace('#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf('<img ${1} class="lazy" src="%s" data-original="${2}" ${3}><noscript><img${1}src="${2}"${3}></noscript>', $loading), $imgstrNew);
                    } else {
                        $imgstrNew = preg_replace('#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf('<img ${1} src="%s" data-original="${2}" ${3}><noscript><img${1}src="${2}"${3}></noscript>', $loading), $imgstrNew);
                        $imgstrNew = preg_replace('/class(\s*)=(\s*)[\'|\"](.*?)[\'|\"]/i', 'class="${3} lazy"', $imgstrNew);
                    }
                    $content = str_ireplace($imgstr, $imgstrNew, $content);
                }
            }
        }
        return $content;
    }
}

2、前台调用

{$eyou.field.content|lazy_msubstr=###}

3、最后别忘了,引入js插件,并在适当地方初始化插件

$(".lazy").LazyLoad({ threshold: 200 });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值