Rumah >hujung hadapan web >tutorial js >Analisis ringkas tentang kemahiran bar_javascript pemuatan tak segerak JS

Analisis ringkas tentang kemahiran bar_javascript pemuatan tak segerak JS

WBOYasal: 2016-05-16 15:02:141814semak imbas

Tunjukkan kesan:

1) Apabila anda mengklik Muatkan, simulasikan pemuatan tak segerak Penyemak imbas disekat Bar kemajuan muncul.

Idea pelaksanaan:

1. Apabila pengguna mengklik butang muat untuk melakukan permintaan tak segerak Kaedah dipanggil dan bar pemuatan muncul

2. Bagaimana untuk melaksanakan bar kemajuan?

1) Tambahkan div dalam document.body dan tutup penyemak imbas Tetapkan latar belakang kepada z-index = 999. Pengguna tidak boleh mengubah suai nilai antara muka apabila memuatkan

2) Tambahkan div dinamik dalam document.body.

Pelaksanaan kod:

Utama.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="Loading.js" charset="utf-8"></script>
<link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<button onclick="showLoading()">Load</button>
</body>
</html>

Memuatkan.js:

function showLoading()
{
var overDiv = document.createElement("div");
var loadingDiv = document.createElement("div");
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");
var childDiv3 = document.createElement("div");
overDiv.classList.add('over');
loadingDiv.classList.add('spinner');
childDiv1.classList.add('bounce1')
childDiv2.classList.add('bounce2')
childDiv3.classList.add('bounce3')
loadingDiv.appendChild(childDiv1);
loadingDiv.appendChild(childDiv2);
loadingDiv.appendChild(childDiv3);
document.body.appendChild(overDiv);
document.body.appendChild(loadingDiv)
setTimeout(function()
{
document.body.removeChild(overDiv);
document.body.removeChild(loadingDiv)
}, 5000);
}

Memuatkan.css

.spinner {
width: 150px;
text-align: center;
left: 50%;
top: 50%;
position: absolute;
z-index: 1000;
}
.over {
width: 100%;
height: 100%;
z-index: 998;
background-color: gray;
position:absolute;
top: 0px ;
left : 0px;
opacity: 0.2;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

Ringkasan:

1. Anda boleh mencadangkan kaedah tersebut merangkum semula permintaan Ajax Gunakan kaedah bar kemajuan untuk menyekat secara automatik apabila memanggil permintaan Ajax.

2. Jika Angular menyediakan kaedah untuk memantau panggilan http Hanya memanggil kaedah bar kemajuan semasa memantau permintaan pelaksanaan http setiap kali memantau permintaan pelaksanaan http. Tidak perlu memanggil kaedah untuk memaparkan bar kemajuan setiap kali anda melaksanakan http.

Kandungan di atas berkaitan dengan bar kemajuan pemuatan asynchronous js yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Penjelasan terperinci tentang Model model dan koleksinya dalam rangka kerja Backbone.js_Pengetahuan asasArtikel seterusnya：Penjelasan terperinci tentang Model model dan koleksinya dalam rangka kerja Backbone.js_Pengetahuan asas

Artikel berkaitan

Lihat lagi