Emlog图片懒加载非插件实现教程
管理 2023-7-26

效果样式图:

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

方法如下:

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

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

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

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

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

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

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

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.说下文章专区调用方式

原本的图片调用方式为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=这行代码即可,提醒需注意代码规范!

下载地址: