腾轩资源网 - 专注分享软件、游戏辅助、免费活动等其他网络资源,好货不私藏!

Emlog图片懒加载动画实现教程免费分享 非插件

腾轩资源网 其他教程

教程分享

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

图片1.png

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

图片2.png

3、打开header.php文件,将下列代码插入在/head标签前;

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

如下图:

3.png

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>

如下图:

4.png

5、文章专区调用方式
原本的图片调用方式为
src="<?php echo $row['img'];?>"

需要修改为

src='<?php echo TEMPLATE_URL;?>/lib/images/lazyload.gif' data-echo="<?php echo $row['img'];?>"

如下图:

5.png

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

原本的图片调用方式为

src="<?php echo $value['img'];?>"

需修改为

src='<?php echo TEMPLATE_URL;?>/lib/images/lazyload.gif' data-echo="<?php echo $value['img'];?>"

如下图:

6.png

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

在线下载:https://wza.lanzoui.com/iZTHvsy7tha

免责声明:

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

评论列表

4105