中午看《众妙之门》看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家。
smartImg 的全部文件可以从我的Github上下载,其实它非常小巧,去掉注释一共也就40行,之所以这么轻便,JQ也是帮了大忙。
我们在搭建响应式页面时,对于图片的处理或多或少都有些烦躁,例如我们希望在某个屏宽的环境下显示某一张图片,在另一个屏宽的环境下则显示为另一张图片。
这种做法对于用户体验是比较重要的,常规建议是用户用大屏幕设备访问我们页面时,图片显示为大分辨率的;若用户使用小屏幕的移动设备访问我们页面时,依旧加载大尺寸的图片显然是很不妥当的做法,这样太吃用户流量,也影响加载速度。
我们的确可以用一个设置有background的容器来替代图片,然后在css media query中定义不同屏宽范围下该容器背景所对应的地址,但这种写法较为繁琐、不利维护和seo(当然它的效率会高一些)。
smartImg为解决这个问题提供了方案。
在页面引入了jQuery和smartImg文件之后,在需要响应的<img>标签里添加 s-src="图片地址1 屏宽1,图片地址2 屏宽2, ..., 图片地址n 屏宽n" ,若屏宽参数没写则默认为0。
当然,如果图片地址前缀是一样的,我们还可以加上s-prefix属性:
smartImg也为页面动态图片提供方案,在图片动态地新增后执行 $.smartImg() 方法即可。
虽然初衷是将其用于移动页面,但smartImg也可用于PC页面,支持屏幕大小缩放事件。