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标签是否有classif (!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 });

EyouCMS文章图片懒加载相关推荐

“懒”的妙用——浅析图片懒加载技术
1.定义图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...
前端性能优化的重要方案：图片懒加载
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端性能优化的重要方案:图片懒加载,主要包括其原理,我们常用的一些插件,及编写源码实现图片懒加载功能等,图片懒加载是项目比较常见的 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...
JavaScript两个实用的图片懒加载优化方法
文章目录一.方法一二.方法二 InterSectionObserver 一.方法一重点: 1.getBoundingClientRect().top > window.innerHeigh ...
JS无限滚动、回到顶端和图片懒加载
目录前言 1 无限滚动(垂直) 1.1 效果和代码 1.2 过程解释 1.2.1 监听页面滚动 1.2.2 获取距页面底部的距离 2 回到顶端 2.1 效果和代码 2.2 过程解释 3 图片懒加载 ...
layui图片懒加载-loading占位图
前言使用layui的图片懒加载,发现未加载的图片没有loading占位图,显示的是裂图,看着不是很好.找了一些解决方法我统一记录一下. layui图片懒加载使用方法 layui.use('flow' ...
聊一聊前端图片懒加载背后的故事
本文内容什么是懒加载如何实现懒加载监听滚动事件 IntersectionObserver 浏览器原生方案本文小结相信大家已经注意到我博客有了一点变化,因为博主最近利用空闲时间对博客进行了优化 ...
java页面展示流式图片,javascript瀑布流式图片懒加载实例解析与优化
之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒 ...

EyouCMS文章图片懒加载

EyouCMS文章图片懒加载相关推荐

最新文章

热门文章