做个简单的loading效果+写个原生的懒加载
写在前面
首先要感谢我家里的网速，如果特别好的话，我可能不会想到实现这个小玩意，我百度一个东西的时候发现下面这三个小球一直晃悠，实在是很烦，决定看看这个是怎么实现的，所以就有了今天的文章，首先说明这个不是百度的实现过程，这个是我自己想的他是怎么实现的，可能百度的那群大佬不会像我写的那么的lowb，不过，效果嘛，看着差不多就可以了，先看一下效果图：
在这里插入图片描述
这里不知道为什么，使用QQ录制屏幕的时候有一点不好，就是他不可以完全还原你的效果，也就是他的帧数不稳定，其实真实的效果是比这个好看一点的，虽然也好看不到哪儿去，但是流畅度还是高一些的，我尝试使用MBP自带的录制屏幕的软件，但是他的格式不对，这里不给上传，所以没办法，将就看吧，或者您们直接拷贝下面的源码，自己运行是最好的。废话不说，直接给你们源码。
文章涉及到的小知识点：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
display: flex;
justify-content: center;
margin-top: 10%;
background: #000000;
}
#content{
width: 400px;
height: 150px;
position: absolute;
background: #FFF;
border-radius: 5px;
display:flex;
flex-direction: row;
align-items: center;
}
.left{
width: 20px;
height: 20px;
position: absolute;
left: 140px;
background: RGB(227,42,55);
border-radius: 50%;
animation: Moveright 1.5s infinite;
}
@-webkit-keyframes Moveright{
to{
left:220px;
}
}
.center{
width: 20px;
height: 20px;
position: absolute;
left: 180px;
background: RGB(76,76,76);
border-radius: 50%;
}
.right{
width: 20px;
height: 20px;
position: absolute;
left: 220px;
background: rgb(43,113,248);
border-radius: 50%;
animation: Moveleft 1.5s infinite;
}
@-webkit-keyframes Moveleft{
to{
left:140px;
}
}
</style>
</head>
<body>
<div id="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>这就是所有的代码，其实很简单的一个效果，我做的是不够完善的，只要你观察的仔细，是可以看出来问题的，但是我们自己做项目的时候这个loading效果是可以使用的，然后就是做这个的还有一个目的就是以后有类似的效果的时候可以直接拿来使用，稍微做一下改动就可以了，达到不重复造轮子的想法，这里只是借助这个平台暂存一下代码，没有什么技术点，这里就不废话了，不是我不上传到github上，是我家里的网速不允许啊[?]
懒加载
- 上面说了在家确实是无聊，没事巩固巩固自己的基础，写点原生的东西出来，这里写一个原生的懒加载的实现。
效果图
懒加载效果图
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
display: flex;
justify-content: center;
}
#box {
display: flex;
width: 70%;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
ul li {
width: 32%;
border: 1px solid red;
height: 250px;
border-radius: 4px;
float: left;
list-style: none;
margin: 0px 10px 10px 0px;
}
img {
flex-grow: 1;
width: 100%;
height: 100%;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<img _src="images/1.jpeg" />
</li>
<li>
<img _src="images/2.jpeg" />
</li>
<li>
<img _src="images/3.jpeg" />
</li>
<li>
<img _src="images/4.jpeg" />
</li>
<li>
<img _src="images/5.jpeg" />
</li>
<li>
<img _src="images/6.jpeg" />
</li>
<li>
<img _src="images/7.jpeg" />
</li>
<li>
<img _src="images/8.jpeg" />
</li>
<li>
<img _src="images/9.jpeg" />
</li>
<li>
<img _src="images/10.jpeg" />
</li>
<li>
<img _src="images/11.jpeg" />
</li>
<li>
<img _src="images/12.jpeg" />
</li>
<li>
<img _src="images/13.jpeg" />
</li>
<li>
<img _src="images/14.jpeg" />
</li>
<li>
<img _src="images/15.jpeg" />
</li>
<li>
<img _src="images/16.jpeg" />
</li>
<li>
<img _src="images/17.jpeg" />
</li>
<li>
<img _src="images/18.jpeg" />
</li>
</ul>
</div>
</body>
<script>
//获取到所有图片的对象
var objImages = document.getElementsByTagName("img");
//获取到可视区域的高度
var eyeHeight = document.documentElement.clientHeight;
console.info("可视区域高度为：" + eyeHeight);
//当页面加载和滚动的时候触发该事件
window.onload = window.onscroll = function() {
//获取到滚动条高度
let scrollHeigth = document.documentElement.scrollTop;
console.info("可视区域高度为" + scrollHeigth)
//将图片遍历出来进行筛选哪些是可以显示的
for (let item of objImages) {
//获取到该图片到顶部的距离
let imgTop = item.offsetTop;
console.info(imgTop)
//此时如果该图片到顶部的距离小于了滚动条加上可视区域的距离,说明该图片是可以显示的
if (imgTop <= eyeHeight + scrollHeigth) {
item.src = item.getAttribute("_src")
}
}
}
</script>
</html>上面的注释很明白了，这里不做解释了，一张图是看不出来效果的，我录制了一个视频，大家可以看一下。视频地址
拜了个拜您嘞
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录