Fiddle에서 성공했습니다. http://jsfiddle.net/donhuvy/hfq4ycvs/
하지만 로컬에서 실행하면 (파일 progress_bar.html ) 아무 일도 일어나지 않습니다.
<!DOCTYPE html>
<html>
<head>
<title>progress bar...</title>
<style type="text/css">
.progress {
display: block;
text-align: center;
width: 0;
height: 3px;
background: red;
transition: width .3s;
}
.progress.hide {
opacity: 0;
transition: opacity 1.3s;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
var data = [];
for (var i = 0; i < 100000; i++) {
var tmp = [];
for (var i = 0; i < 100000; i++) {
tmp[i] = 'hue';
}
data[i] = tmp;
}
;
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
if (percentComplete === 1) {
$('.progress').addClass('hide');
}
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$('.progress').css({
width: percentComplete * 100 + '%'
});
}
}, false);
return xhr;
},
type: 'POST',
url: "/echo/html",
data: data,
success: function (data) {
}
});
});
</script>
</head>
<body>
<div class="progress"></div>
</body>
</html>
AJAX는 항상 서버에서 요청하고 응답을 기다리기 때문에 HTML 파일을 웹 서버 (Apache HTTP 서버 또는 NGINX)에 넣어야하며 AJAX가 실행됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다