Как нам добиться анимации загрузки ресурсов страницы (html, css, js и images) с индикатором процента через ajax или некоторые другие плагины?
Пример: большинство сайтов из http://awwwards.com
Образец один: http://www.lafamiliaxsiempre.cl/
Я попытался с помощью следующего кода и придерживался, когда несколько файлов для загрузки.
Пожалуйста, проверьте код ниже
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
margin: 0;
font-family: "Titillium Web";
font-size: 15px;
}
#demo-container {
width: 400px;
margin: 60px auto;
}
#download-button {
background-color: white;
color: #2980b9;
border: 2px solid #2980b9;
font-family: inherit;
outline: none;
min-width: 100px;
padding: 10px;
font-size: inherit;
border-radius: 2px;
cursor: pointer;
display: block;
margin: 0 auto;
}
#start-download {
text-align: center;
display: none;
}
#download-progress-container {
border: 1px solid #cccccc;
padding: 4px;
display: none;
height: 20px;
}
#download-progress {
background-color: #2980b9;
display: inline-block;
height: 100%;
}
#save-file {
color: #2980b9;
text-decoration: none;
display: none;
text-align: center;
}
#save-file:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="demo-container">
<button id="download-button">Download</button>
<div id="download-ui-container">
<div id="start-download">Starting Download..</div>
<div id="download-progress-container">
<div id="download-progress"></div>
</div>
<a id="save-file">Save File</a>
</div>
</div>
<script>
var _OBJECT_URL;
document.querySelector('#download-button').addEventListener('click', function() {
var request = new XMLHttpRequest();
request.addEventListener('readystatechange', function(e) {
if (request.readyState == 2 && request.status == 200) {
document.querySelector('#start-download').style.display = 'block';
document.querySelector('#download-button').style.display = 'none';
} else if (request.readyState == 3) {
document.querySelector('#download-progress-container').style.display = 'block';
document.querySelector('#start-download').style.display = 'none';
} else if (request.readyState == 4) {
_OBJECT_URL = URL.createObjectURL(request.response);
document.querySelector('#save-file').setAttribute('href', _OBJECT_URL);
document.querySelector('#save-file').setAttribute('download', "file-name.avi"); //here i wish to download all the html, css, js, and image files
document.querySelector('#save-file').style.display = 'block';
document.querySelector('#download-progress-container').style.display = 'none';
setTimeout(function() {
window.URL.revokeObjectURL(_OBJECT_URL);
document.querySelector('#download-button').style.display = 'block';
document.querySelector('#save-file').style.display = 'none';
}, 60 * 1000);
}
});
request.addEventListener('progress', function(e) {
var percent_complete = (e.loaded / e.total) * 100;
document.querySelector('#download-progress').style.width = percent_complete + '%';
});
request.responseType = 'blob';
request.open('get', 'file-name.avi'); //here i wish to download all the html, css, js, and image files
request.send();
});
</script>
</body></html>