前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端延迟加载

前端延迟加载

作者头像
ydymz
发布2018-11-09 17:09:50
1.1K0
发布2018-11-09 17:09:50
举报
文章被收录于专栏:lgp20151222lgp20151222

一 整合

由于本人的码云太多太乱了,于是决定一个一个的整合到一个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啊?于是,我百度了个轻量记得懒加载包

然而,百度的前端的质量....

下面是最少的代码实现懒加载

三 代码

代码语言:javascript
复制
<!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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一 整合
  • 三 代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档