使用CSS3 +JS实现图片预加载的动画效果
【摘要】 效果图：
代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片预加载</title> </head> <style> .content { width: 600px; margin: auto; } img { max-width: 100%; } .loa...
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片预加载</title>
</head>
<style>
.content {
width: 600px;
margin: auto;
}
img {
max-width: 100%;
}
.loading {
width: 150px;
height: 40px;
margin: 50px auto;
}
.loading span {
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background: lightgreen;
margin-left: 5px;
-webkit-animation: load 2s ease infinite;
}
@-webkit-keyframes load {
0%,
100% {
height: 40px;
background: lightgreen;
}
50% {
height: 70px;
margin: -15px 0;
margin-left: 5px;
background: lightblue;
}
}
.loading span:nth-child(2) {
-webkit-animation-delay: 0.2s;
}
.loading span:nth-child(3) {
-webkit-animation-delay: 0.4s;
}
.loading span:nth-child(4) {
-webkit-animation-delay: 0.6s;
}
.loading span:nth-child(5) {
-webkit-animation-delay: 0.8s;
}
.loading span:nth-child(6) {
-webkit-animation-delay: 1s;
}
</style>
<body>
<div class="content">
<div class="content_choose zero">
<img class="p0" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content_choose one"> <img class="p1" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content_choose two"> <img class="p2" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content_choose three"><img class="p3" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content_choose one"> <img class="p4" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content_choose two"> <img class="p5" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content_choose three"><img class="p6" src="">
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
<script src="jquery-1.11.3.min.1.js"></script>
<script>
/*添加要加载的图片*/
var gifList = ["list/service-service01.png", "list/service-service02.png", "list/service-service03.png",
"list/service-service04.png", "list/service-service05.png", "list/service-service06.png", "list/service-service07.png"
];
for (var i = 0; i < gifList.length; i++) {
(function(index) {
loadImage(gifList[index], function() {
var image = $(".p" + index);
image.next().remove();
image.attr("src", gifList[index]).hide().fadeIn(500);
})
})(i)
}
function loadImage(url, callback) {
var image = new Image;
image.onload = function() {
image.onload = null,
callback(image)
},
image.src = url;
}
</script>
</html>
文章来源: albertyang.blog.csdn.net，作者：Albert Yang，版权归原作者所有，如需转载，请联系作者。
原文链接：albertyang.blog.csdn.net/article/details/103456064
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）