使用图片加载速度,编写一个 测速 插件

本文介绍了一种使用图片的onload事件来创建一个测速插件的方法。当进度条达到90%而图片仍未加载完成时,通过定时器每隔一秒钟检查图片加载状态。一旦加载完成,计算加载时间和网速。提供了git地址供查看完整代码,欢迎大家提出改进意见。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前沿:在用户网速不好的时候,无法使用。直观的带给了用户,这个网站很不好。其实很多时候我们也可以将测网速带给用户,让用户自己体验。这个有很多种,今天就写一下 使用图片来测网速

架构:html + es6 + css
思路:

在这个测速插件当中,主要使用的是图片 onload事件来判断 图片是否加载完成。

在进度条执行当中,如果它在进度条达到90的时候,如果图片还未完成加载,我将使用监听函数,每隔一秒去 判断图片是否加载完成(这个自己也可以设置)。如果完成了,将更新进度条的最新状态

完成之后,将计算图片加载开始时间到图片完成加载的时间,以及网速,我这里使用的是1024来计算,算法参考于网上。

代码

(这里只展示js 代码,如需完整代码 ,请前往git查看)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值