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

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

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

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

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

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

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>

5.说下文章专区调用方式
原本的图片调用方式为src=""
需要修改为

src='<!--?php echo TEMPLATE_URL;?-->/lib/images/lazyload.gif' data-echo="<!--?php echo $row['img'];?-->"

6.分类列表页调取方式有所不同
之前为
src=""
需修改为
src='/lib/images/lazyload.gif' data-echo=""

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

下载地址：https://pi5.cc/s/em2iiyQpCG