Emlog图片懒加载非插件实现教程-黑猫查查网
摘要:
效果样式图: 方法如下: 1. 上传附件内的lazyload.gif到模板的lib/images文件夹 ...
描述:
效果样式图:
方法如下:
1. 上传附件内的lazyload.gif到模板的lib/images文件夹
2. 上传附件内的lazyload.js到模板的lib/js文件夹
3.打开header.php文件,在/head标签前插入
- <script src="<?php echo TEMPLATE_URL;?>lib/js/lazyload.js">
- </script>
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>
5.说下文章专区调用方式
原本的图片调用方式为src=" "
需要修改为
src=" /lib/images/lazyload.gif" data-echo=" "
6.分类列表页调取方式有所不同
之前为
src=" "
需修改为
src=" /lib/images/lazyload.gif" data-echo=" "
调取方式也就是在src=后加入' /lib/images/lazyload.gif' data-echo=这行代码即可,提醒需注意代码规范!
THE END
请登录后发表评论