前沿:在用户网速不好的时候,无法使用。直观的带给了用户,这个网站很不好。其实很多时候我们也可以将测网速带给用户,让用户自己体验。这个有很多种,今天就写一下 使用图片来测网速
架构:html + es6 + css
思路:
在这个测速插件当中,主要使用的是图片 onload事件来判断 图片是否加载完成。
在进度条执行当中,如果它在进度条达到90的时候,如果图片还未完成加载,我将使用监听函数,每隔一秒去 判断图片是否加载完成(这个自己也可以设置)。如果完成了,将更新进度条的最新状态
完成之后,将计算图片加载开始时间到图片完成加载的时间,以及网速,我这里使用的是1024来计算,算法参考于网上。
代码
(这里只展示js 代码,如需完整代码 ,请前往git查看)