eyoucms Artikel Bild verzögertes Laden

End-Handys in Bezug auf die Netzwerkgeschwindigkeit und anderen Gründen, da haben wir ein großes Bild Ansicht des Artikels, wenn die Situation unfreundlich Erfahrung, faul Laden von Bildern ein gutes Mittel dieses Problem sein kann. Für den mobilen End-Leichtgewichts diesen Fall ohne jquery betrachten, verwenden Sie eine kompaktere zepto.picLazyLoad.min.js, laden Sie die Plug-eigenen Baidu, spezifische Optimierung eyou die folgenden Artikel begann träges Laden mit.

Finden Sie die Anwendung / function.php Fügen Sie benutzerdefinierte Artikelinhalt Ausgabemethode 1.

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, die Rezeption Anrufe

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

3. Schließlich vergessen Sie nicht, die Einführung von js Plugins und gegebenenfalls Plug-Initialisierung

Schreiben Sie zum Beispiel in einer öffentlichen Datei js

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