python能做页面加载动画吗_js页面loading动画的简单实现

loading动画结构

样式

@keyframes load {

0% {

background: rgba(229, 185, 96, .4); margin-top: 25%; height: 10%;

}

50% {

background: rgba(229, 185, 96, .8); height: 100%; margin-top: 0;

}

100% {

background: rgba(229, 185, 96, .4); height: 10%; margin-top: 25%;

}

}

.modal {

position: fixed; width: 100%; text-align: center; left: 0; top: 0; height: 100%; display: flex; align-items: center; z-index: 998; background: #000; justify-content: center;

}

.loader {

width: 180px; height: 100px; span {

display: block; background: rgba(229, 185, 96, .8); width: 7px; height: 10%; border-radius: 14px; margin-right: 5px; float: left; margin-top: 25%;

&:nth-child(1) {

animation: load 2.5s 1.4s infinite linear

}

&:nth-child(2) {

animation: load 2.5s 1.2s infinite linear

}

&:nth-child(3) {

animation: load 2.5s 1.0s infinite linear

}

&:nth-child(4) {

animation: load 2.5s 0.8s infinite linear

}

&:nth-child(5) {

animation: load 2.5s 0.6s infinite linear

}

&:nth-child(6) {

animation: load 2.5s 0.4s infinite linear

}

&:nth-child(7) {

animation: load 2.5s 0.2s infinite linear

}

&:nth-child(8) {

animation: load 2.5s 0s infinite linear

}

&:nth-child(9) {

animation: load 2.5s 0.2s infinite linear

}

&:nth-child(10) {

animation: load 2.5s 0.4s infinite linear

}

&:nth-child(11) {

animation: load 2.5s 0.6s infinite linear

}

&:nth-child(12) {

animation: load 2.5s 0.8s infinite linear

}

&:nth-child(13) {

animation: load 2.5s 1s infinite linear

}

&:nth-child(14) {

animation: load 2.5s 1.2s infinite linear

}

&:nth-child(15) {

animation: load 2.5s 1.4s infinite linear

}

}

}

判断所有图片加载完成

页面中图片的加载往往是最耗时间的，通过判断所有图片是否加载完成来隐藏loading动画，图片的complete 属性可返回浏览器是否已完成对图像的加载，如果加载完成，则返回 true，否则返回 fasle，循环判断所有图片complete对象是否为True来隐藏loading动画。

//判断图片加载完成隐藏loading var img = document.getElementsByTagName('img')

var timer = setInterval(function () {

var num = 0

if(img.length>0){

for (var i = 0; i < img.length; i++) {

if (img[i].complete) {

num = i + 1;

if (num == img.length) {

clearInterval(timer);

document.getElementById('modal').style.display = "none"

}

}

}

}else{

document.getElementById('modal').style.display = "none"

}

}, 10);

完整代码

js网页Loading效果

页面内容

//判断图片加载完成隐藏loading var img = document.getElementsByTagName('img')

var timer = setInterval(function () {

var num = 0

if(img.length>0){

for (var i = 0; i < img.length; i++) {

if (img[i].complete) {

num = i + 1;

if (num == img.length) {

clearInterval(timer);

document.getElementById('modal').style.display = "none"

}

}

}

}else{

document.getElementById('modal').style.display = "none"

}

}, 10);

示例动画