(kule66.com)- 干货GAME的精品收藏站!
当前位置:主页文章其他教程

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

文章来源:酷乐网 更新时间:2021-8-19 14:47 热度:569

效果样式图:

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>

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

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

教程来自酷乐网  https://kule66.com  QQ1573652308



资源下载
标签: emlog
the end
酷乐网

免责声明:本文来自酷乐网发布,但不代表本站的观点和立场。侵删请致信E-mail:1573652308@qq.com

同类推荐
评论列表
签到
        沙发 发表于2021-09-18 09:20 @回复
    4533453
    345无法联网河谷
    酷乐网 回复
    2021-09-18 20:29
    @ :什么问题?
×
其他教程 Emlog图片懒加载非插件实现教程
效果样式图: 方法如下: 1.   &...
扫描二维码阅读原文 Emlog图片懒加载非插件实现教程
酷乐网 https://kule66.com/