前端延迟加载
前端延迟加载
ydymz
发布于 2018-11-09 17:09:50
发布于 2018-11-09 17:09:50
代码可运行
运行总次数：0
代码可运行
一 整合
由于本人的码云太多太乱了，于是决定一个一个的整合到一个springboot项目里面。
附上自己的github项目地址 https://github.com/247292980/spring-boot
附上汇总博文地址 https://cloud.tencent.com/developer/article/1333123
以整合功能
spring-boot，FusionChart，thymeleaf，vue，ShardingJdbc，mybatis-generator，微信分享授权，drools，spring-security，spring-jpa，webjars，Aspect，drools-drt，rabbitmq，zookeeper，mongodb，mysql存储过程
这次就来整合下前端的延迟加载
二
之前用的是jquery的lazyload，但是不是全部项目是jq啊？于是，我百度了个轻量记得懒加载包
然而，百度的前端的质量....
下面是最少的代码实现懒加载
三 代码
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<a>easy thymeleaf</a>
<img class="" src="images/loading.gif" data-echo="images/big.jpg">
<!--此外他们把div套在img外面加个class，而且img也有个class，然后根据这两个class写css，修改src什么，然后还说src默认为blank.gif或者loading.gif....
但是研究了下，这是因为他们不懂src代表什么的意思
当然最大的可能是他复制代码没想那么多...这情况反而最正常
-->
<!-- src是懒加载前的图片，多为空或者loading。百度第一的竟然说这两图片插件自带....不过哪怕他是错的，基本都秒懂怎么改...
data-echo是懒加载后的图片-->
</body>
<script src="js/echo.js"></script>
<script>
Echo.init({
offset: 0,//离可视区域多少像素的图片可以被加载
throttle: 1000 //图片延时多少毫秒加载
});
</script>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-10-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
