1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<html>
<head>
<title>Requête AJAX</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
*{font-size: 16px; font-family: 'Source Sans Pro', sans-serif;}
body{padding: 20px;}
p{margin-bottom: -10px}
input{margin-bottom: 20px;}
</style>
<head>
<body>
<p>Vitesse de connexion:</p> <br />
<input type="text" id="speed" size="30" /> <br />
<input type="button" value="Launch Speed Test" id="speedTest" />
<!-- SCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script type="text/javascript">
var image = "image.jpg";
// Image located on my website http://jeremierindone.be
var size = 148176; // Image size
var timeBefore = 0; // Time at the begining
var timeAfter = 0; // Time after calcul
$("#speedTest").click(function startSpeedTest() {
timeBefore = new Date();
timeBefore = timeBefore.getTime();
var img = new Image();
img.src = image+"?"+timeBefore;
img.onload=endSpeedTest; // Launch function endSpeedTest
});
function endSpeedTest() {
var timeAfter = new Date();
timeAfter = timeAfter.getTime();
var ms = timeAfter-timeBefore; // Calculs difference betweet two times
var speed = Math.round(size/ms*100)/100; // Divides the size by the time
document.getElementById("speed").value=speed+"ko/s"; // Show result to the user
}
$("#speedTest").click(function(){
$.ajax({
url : "image.jpg", //The link to the image
type : "GET", // Ajax Request type get, not post
dataType : "png", // Here we want to process png file
success : function(code_html, statut){ // If request succeeded
console.log("succeeded");
},
error : function(resultat, statut, erreur){
console.log("Failed");
},
complete : function(resultat, statut){
console.log("Complete")
}
});
});
</script>
<!-- SCRIPT END -->
</body>
</html> |
