回答編集履歴
4
エビデンス
answer
CHANGED
|
@@ -20,4 +20,10 @@
|
|
|
20
20
|
xhr.send();
|
|
21
21
|
});
|
|
22
22
|
```
|
|
23
|
-
テテーン♪と表示されないのはダウンロードしているコンテンツが小さいのかと思います。
|
|
23
|
+
テテーン♪と表示されないのはダウンロードしているコンテンツが小さいのかと思います。
|
|
24
|
+
|
|
25
|
+
追記
|
|
26
|
+
|
|
27
|
+
大きいファイルで試した結果を置いておきます。
|
|
28
|
+
|
|
29
|
+
|
3
fix
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var xhr = new XMLHttpRequest
|
|
7
7
|
xhr.open('GET', 'index.html');
|
|
8
8
|
xhr.onprogress = function (evt) {
|
|
9
|
-
|
|
9
|
+
var load = (100*evt.loaded/evt.total|0);
|
|
10
10
|
$('#percent').html(load + '%');
|
|
11
11
|
$('#bar span').css({'width': load*2});
|
|
12
12
|
};
|
2
onreadystatechange に変更
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
onreadystatechange を追加すれば完了のイベントは取れます。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
```javascript
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
$('#percent').html(load + '%');
|
|
11
11
|
$('#bar span').css({'width': load*2});
|
|
12
12
|
};
|
|
13
|
-
xhr.
|
|
13
|
+
xhr.onreadystatechange = function (evt) {
|
|
14
14
|
if (xhr.readyState === 4) {
|
|
15
15
|
if (xhr.status === 200) {
|
|
16
16
|
alert('ダウンロード完了');
|
1
修正
answer
CHANGED
|
@@ -11,7 +11,11 @@
|
|
|
11
11
|
$('#bar span').css({'width': load*2});
|
|
12
12
|
};
|
|
13
13
|
xhr.onload = function (evt) {
|
|
14
|
+
if (xhr.readyState === 4) {
|
|
15
|
+
if (xhr.status === 200) {
|
|
14
|
-
|
|
16
|
+
alert('ダウンロード完了');
|
|
17
|
+
}
|
|
18
|
+
}
|
|
15
19
|
}
|
|
16
20
|
xhr.send();
|
|
17
21
|
});
|