ネットワークの速度やその他の理由の面で携帯電話を終了し、我々は事態非友好的な経験は、遅延ロードのイメージを掲載するこの問題の良い救済することができ、物品の全体像図があります。jqueryのなしでこのケースを考える軽量モバイルエンドのために、特にEyouはは遅延ロードを使用して起動する記事を、以下の最適化、よりコンパクトzepto.picLazyLoad.min.js、Baiduの、ダウンロードプラグインそのものを使用します。
アプリケーション/ function.php追加カスタム記事のコンテンツ出力方法を探す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、フロントデスクへの問い合わせ
{$eyou.field.content|lazy_msubstr=###}
3.最後に、JSプラグインの導入を忘れて、そして適宜プラグイン初期化しません
公衆のjsファイルの例については、書き込み
$(".lazy").picLazyLoad({ threshold: 200 });