中午看《眾妙之門》看到一個響應式圖片處理工具（點此查看）的介紹，然后就心血來潮想着不妨自己寫一個基於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來查看。
共勉~