西门的后花园

一个热爱网络的年轻人的博客

移动端根据网络连接的类型判断加载不同清晰度图片

每次手机打开图片多的网站,最烦的就是我手机3G网络不给力,图片加载太慢。除非在家用WIFI,在外面使用手机时手机网络网速始终不理想。有没有办法根据网络连接的类型判断加载不同清晰度图片呢?

无意中了解到有个js叫navigator.connection.type的,可以判断当前网络连接的类型,据说是Android 2.2 webkit的新API。测试兼容性很不理想,PC里不支持,iOS里不支持,Android里只有部分浏览器支持。

后来又发现微信里也有获取网络状态接口,并且微信6.0版本以后在其内置浏览器的User Agent中也加入了NetType判断。才把connection给想起来,写了段js代码,正好放到年前改版的掌上1号店首页里,配合图片懒加载,做个小改进。

DEMO链接GitHub

用手机扫一扫,打开WIFI和关闭WIFI,加载的图片不一样。我必须要强调的是兼容性,只兼容微信和Android(自带浏览器、Chrome、QQ浏览器)

代码我就不贴了,PC里右键查看源代码,都有注释。

我判断的逻辑比较简单,只判断了WIFI状态和非WIFI,如果你有更复杂的判断,请自行修改吧。我只是抛砖引玉。

题外话:移动端主要是iOS和Android的天下,如果一个功能在iOS里无法实现,那么就只能服务于50%的用户。如果Android里只有部分浏览器支持,那么只能服务于30%的用户。你愿意为这30%的用户加这个功能吗?我愿意。很大一部分原因是因为移动端更新速度快,几个月到一年,系统就会升级新版本,两年用户就会换手机,比PC里的Windows系统升级快很多,所以很有可能未来一段时间iOS也支持了这些功能呢?

评论列表

  1. 这个对于博客来说不大实用吧,毕竟懒得准备几张不同的图片,不过对于应用来说的话挺好的。

  2. 还有一个办法,少用图片。

发表评论

分类目录