<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算页面加载时间</title>
<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
</head>
<body>
<div style="margin:10px">
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516a.com" >
<label class="lbStatus"></label>
</div>
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516b.com" >
<label class="lbStatus"></label>
</div>
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516c.com" >
<label class="lbStatus"></label>
</div>
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516d.com" >
<label class="lbStatus"></label>
</div>
<button id="go">测速</button>
</div>
<div style="margin:10px; width:100%; height:450px; min-height:450px">
<iframe class="fm" width="100%" height="900px" src="http://www.8516a.com" style="display: none"></iframe>
<iframe class="fm" width="100%" height="900px" src="http://www.8516b.com" style="display: none"></iframe>
<iframe class="fm" width="100%" height="900px" src="http://www.8516c.com" style="display: none"></iframe>
<iframe class="fm" width="100%" height="900px" src="http://www.8516d.com" style="display: none"></iframe>
</div>
<script>
var t1 = new Date().getTime(),t2;
$(function(){
$('#go').on('click',function(){
t1 = new Date().getTime();
var inputUrlS = $('.in-url').val();
for(var i=0;i<inputUrlS.length;i++){
$($('.lbStatus')[$(this).index()]).text('加载中...');
$($('.fm')[i]).attr('src',inputUrlS[i]);
}
});
$('.fm').on('load',function(){
t2 = new Date().getTime();
console.info(t2-t1);
console.info($(this).index())
$($('.lbStatus')[$(this).index()]).text('加载完毕，耗时：'+(t2-t1)+'毫秒');
});
});
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算页面加载时间</title>
<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
</head>
<body>
<div style="margin:10px">
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516a.com" >
<label class="lbStatus"></label>
</div>
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516b.com" >
<label class="lbStatus"></label>
</div>
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516c.com" >
<label class="lbStatus"></label>
</div>
<div>
<input type="text" class="in-url" style="width:450px;height:30px" value="http://www.8516d.com" >
<label class="lbStatus"></label>
</div>
<button id="go">测速</button>
</div>
<div style="margin:10px; width:100%; height:450px; min-height:450px">
<iframe class="fm" width="100%" height="900px" src="http://www.8516a.com" style="display: none"></iframe>
<iframe class="fm" width="100%" height="900px" src="http://www.8516b.com" style="display: none"></iframe>
<iframe class="fm" width="100%" height="900px" src="http://www.8516c.com" style="display: none"></iframe>
<iframe class="fm" width="100%" height="900px" src="http://www.8516d.com" style="display: none"></iframe>
</div>
<script>
var t1 = new Date().getTime(),t2;
$(function(){
$('#go').on('click',function(){
t1 = new Date().getTime();
var inputUrlS = $('.in-url').val();
for(var i=0;i<inputUrlS.length;i++){
$($('.lbStatus')[$(this).index()]).text('加载中...');
$($('.fm')[i]).attr('src',inputUrlS[i]);
}
});
$('.fm').on('load',function(){
t2 = new Date().getTime();
console.info(t2-t1);
console.info($(this).index())
$($('.lbStatus')[$(this).index()]).text('加载完毕，耗时：'+(t2-t1)+'毫秒');
});
});
</script>
</body>
</html>
附上源码 这里精髓就在于iframe的src属性 然后利用jq的load 去计算2个时间的时间差 从而生成所要的速度
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
