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

效果

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> 
	

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=这行代码即可,提醒需注意代码规范!

附件下载

温馨提示:

温馨提示:本文最后更新于2021-10-17 21:52:50,某些文章具有时效性,若有错误或已失效,请在下方留言或联系关泽楠
© 版权声明
THE END
喜欢就支持一下吧
点赞5赞赏
分享
评论 共2条
关泽楠的头像-泽楠云资源博客

昵称

取消
昵称表情代码图片
    • yunyue的头像-泽楠云资源博客
      yunyueN新朋友
      0