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

效果样式图:

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第8张图片

方法如下:

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

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第9张图片

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

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第10张图片

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

    1. <script src=”<?php echo TEMPLATE_URL;?>lib/js/lazyload.js“>

 

    1. </script>

 

 

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第11张图片

4.打开footer.php文件,在/footer标签后插入

    1. <script src=”<?php echo TEMPLATE_URL;?>lib/js/lazyload.js“>

 

    1. </script>

 

    1. <script>echo.init({

 

 

    1. offset: 100,

 

 

    1. throttle: 250,

 

 

    1. unload: false,

 

 

    1. callback: function(element, op) {

 

 

    1. console.log(element, ‘has been’, op + ‘ed’)

 

 

    1. }

 

 

    1. }); // ***图片懒加载***//

 

    1. </script>

 

 

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第12张图片

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

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

需要修改为

src=’/lib/images/lazyload.gif’ data-echo=””

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第13张图片

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

之前为

src=””

需修改为

src=’/lib/images/lazyload.gif’ data-echo=””

Emlog图片懒加载非插件实现教程-资源盒-www.ziyuanhe.cn- 第14张图片

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

资源下载此资源仅限注册用户下载,请先
资源下载
下载价格免费
文件名称:Emlog图片懒加载非插件实现教程
文件格式::zip/rar

原文链接:http://www.ziyuanhe.cn/essay/2415,转载请注明出处~~~ 1.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除! 2.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,资源盒对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。 3.请您认真阅读上述内容,下载/购买/使用即意味着您同意上述内容。

0

评论0

疫情助力!为学子提供渠道,让需要学习的学者不再烦恼没有渠道。立即注册
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码