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

效果图:

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

方法如下:

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

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

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

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

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

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

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

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程序图片懒加载非插件实现教程插图4

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

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

需要修改为

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

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

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

之前为

src=" "

需修改为

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

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

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

Emlog程序图片懒加载非插件实现教程插图7
来源:蓝奏网盘
Emlog程序图片懒加载非插件实现教程插图8
来源:百度网盘 | 提取码:iib7
Emlog程序图片懒加载非插件实现教程插图9
来源:天翼网盘

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:1411156739@qq.com
THE END
分享
二维码
打赏
< <上一篇
下一篇>>