Emlog图片懒加载非插件实现教程
发布时间:2021-08-19 14:53:45作者:酷酷的酷乐浏览:未知++分类:网站源码朗读:

效果样式图:

Emlog图片懒加载非插件实现教程

方法如下:

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

Emlog图片懒加载非插件实现教程

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

Emlog图片懒加载非插件实现教程

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

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

Emlog图片懒加载非插件实现教程

4.打开footer.php文件,在/footer标签后插入

  1. <script src="<?php echo TEMPLATE_URL;?>lib/js/lazyload.js">
  2. </script>
  3. <script>echo.init({
  4.  
  5. offset: 100,
  6.  
  7. throttle: 250,
  8.  
  9. unload: false,
  10.  
  11. callback: function(element, op) {
  12.  
  13. console.log(element, 'has been', op + 'ed')
  14.  
  15. }
  16.  
  17. }); // ***图片懒加载***//
  18. </script>


Emlog图片懒加载非插件实现教程

5.说下文章专区调用方式

原本的图片调用方式为src=" "

需要修改为

src=' /lib/images/lazyload.gif' data-echo=" "

Emlog图片懒加载非插件实现教程

6.分类列表页调取方式有所不同

之前为

src=" "

需修改为

src=' /lib/images/lazyload.gif' data-echo=" "

Emlog图片懒加载非插件实现教程

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

下载地址:https://nszyw.lanzoui.com/ikbS2svclqd

收藏分享支持举报

免责声明

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

请先后发表评论 (・ω・)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

感谢您的支持

 

 

举报