eyoucms article picture lazy loading

Mobile phone in the end the reason the network speed, there we have a big picture view of the article when the situation unfriendly experience, lazy loading images can be a good remedy this problem. For the mobile end lightweight consider this case without jquery, use a more compact zepto.picLazyLoad.min.js, Baidu download plug-ins themselves, specifically to optimize the following article eyou start using lazy loading.

1. Find the application / function.php add custom article content output method

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, the front desk calls

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

3. Finally do not forget, the introduction of js plugins, and where appropriate plug-initialization

For example, write in a public js file

$(".lazy").picLazyLoad({ threshold: 200 });