标签：style blog http color io os 使用 ar strong
中午看《众妙之门》看到一个响应式图片处理工具（点此查看）的介绍，然后就心血来潮想着不妨自己写一个基于JQ的吧，于是就又有了这么一个干货给大家。
smartImg 的全部文件可以从我的Github上下载，其实它非常小巧，去掉注释一共也就40行，之所以这么轻便，JQ也是帮了大忙。
应用场景
我们在搭建响应式页面时，对于图片的处理或多或少都有些烦躁，例如我们希望在某个屏宽的环境下显示某一张图片，在另一个屏宽的环境下则显示为另一张图片。
这种做法对于用户体验是比较重要的，常规建议是用户用大屏幕设备访问我们页面时，图片显示为大分辨率的；若用户使用小屏幕的移动设备访问我们页面时，依旧加载大尺寸的图片显然是很不妥当的做法，这样太吃用户流量，也影响加载速度。
我们的确可以用一个设置有background的容器来替代图片，然后在css media query中定义不同屏宽范围下该容器背景所对应的地址，但这种写法较为繁琐、不利维护和seo（当然它的效率会高一些）。
smartImg为解决这个问题提供了方案。
使用方式
在页面引入了jQuery和smartImg文件之后，在需要响应的<img>标签里添加 s-src="图片地址1 屏宽1,图片地址2 屏宽2, ..., 图片地址n 屏宽n" ，若屏宽参数没写则默认为0。
如下示例：
<img s-src="img/large.jpg 900,img/huge.jpg 1100,img/small.jpg" />
它表示当屏幕宽度大于1100px时显示img/huge.jpg，当屏幕宽度小于1100px但大于900px时显示img/large.jpg，其它更小屏幕宽度时则显示img/small.jpg。
当然，如果图片地址前缀是一样的，我们还可以加上s-prefix属性：
<img s-prefix="img/" s-src="large.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0" />
smartImg也为页面动态图片提供方案，在图片动态地新增后执行 $.smartImg() 方法即可。
虽然初衷是将其用于移动页面，但smartImg也可用于PC页面，支持屏幕大小缩放事件。
Demo
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <title>Demo</title> <style type="text/css"> html,body{margin:0;padding:0;} div{position:relative;margin:20px auto;width: 90%; } .img1{width: 100%;} .img2{width: 100%;} </style> </head> <body> <div> <img class="img1" s-prefix="img/" s-src="large.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0" /> <img class="img2" s-src="img/large2.jpg 900,img/huge2.jpg 1100,img/small2.jpg" /> </div> <script src="jq.js"></script> <script src="smartImg.js"></script> </body> </html>
效果：
更具体的体验请下载 smartImg 后自行运行demo.html来查看。
共勉~
标签：style blog http color io os 使用 ar strong
原文地址：http://www.cnblogs.com/vajoy/p/4004396.html
