使用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）