效果样式图：

20210819235759_476736.png


方法如下：

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

20210819235732_443267.png


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

20210819235703_555180.png

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

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

20210819235633_854449.png

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>

20210819235606_874928.png

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

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

需要修改为

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

20210819235505_613159.png

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

之前为

src=" "

需修改为

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

20210819235435_374603.png

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