继续送假期干货——响应式图片工具smartImg
中午看《眾妙之門》看到一個響應式圖片處理工具（點此查看）的介紹，然后就心血來潮想著不妨自己寫一個基于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來查看。
共勉~
總結
以上是生活随笔為你收集整理的继续送假期干货——响应式图片工具smartImg的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cursor 的moveToFirst和
- 下一篇： Restive.js – 轻松让网站变成