emlog如何实现网站图片懒加载方法「实战教程」

admin 583 0

emlog如何实现网站图片懒加载方法「实战教程」-第1张图片-新锐站长网

教程如下:

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

emlog如何实现网站图片懒加载方法「实战教程」-第2张图片-新锐站长网

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

emlog如何实现网站图片懒加载方法「实战教程」-第3张图片-新锐站长网

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

emlog如何实现网站图片懒加载方法「实战教程」-第4张图片-新锐站长网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张图片-新锐站长网

5.说下文章专区调用方式原本的图片调用方式为src=" "需要修改为src=' /lib/images/lazyload.gif' >emlog如何实现网站图片懒加载方法「实战教程」-第6张图片-新锐站长网

6.分类列表页调取方式有所不同之前为src=" "需修改为src=' /lib/images/lazyload.gif' >emlog如何实现网站图片懒加载方法「实战教程」-第7张图片-新锐站长网

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


代码打包大小:680.3 KB
已经过安全软件检测无毒,请您放心下载。

标签: emlog图片 emlog懒加载 emlog图片懒加载 emlog教程 懒加载方法

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~