当前位置:网站首页 > 技术教程 > 正文

手把手教你把emlog图片实现懒加载效果「图文教程」

作者:爱尚日期:2021-08-20浏览:分类:技术教程

效果样式图:

手把手教你把emlog图片实现懒加载效果「图文教程」 第1张

方法如下:

1. 上传附件内的lazyload.gif到模板的lib/images文件夹

手把手教你把emlog图片实现懒加载效果「图文教程」 第2张

2. 上传附件内的lazyload.js到模板的lib/js文件夹

手把手教你把emlog图片实现懒加载效果「图文教程」 第3张

3.打开header.php文件,在/head标签前插入

手把手教你把emlog图片实现懒加载效果「图文教程」 第4张4.打开footer.php文件,在/footer标签后插入

 <script src="<?php echo TEMPLATE_URL;?>lib/js/lazyload.js">

		 </script>

		 <script>echo.init({

		 

		 offset: 100,

		 

		 throttle: 250,

		 

		 unload: false,

		 

		 callback: function(element, op) {

		 

		 console.log(element, 'has been', op + 'ed')

		 

		 }

		 

		 }); // ***图片懒加载***//

		 </script>

手把手教你把emlog图片实现懒加载效果「图文教程」 第5张

5.说下文章专区调用方式原本的图片调用方式为src=" "需要修改为src=' /lib/images/lazyload.gif' >手把手教你把emlog图片实现懒加载效果「图文教程」 第6张

6.分类列表页调取方式有所不同之前为src=" "需修改为src=' /lib/images/lazyload.gif' >手把手教你把emlog图片实现懒加载效果「图文教程」 第7张

调取方式也就是在src=后加入' /lib/images/lazyload.gif' data-echo=这行代码即可,提醒需注意代码规范!

代码打包来源:蓝奏
已经过安全软件检测无毒,请您放心下载。
免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯