继续送假期干货——响应式图片工具smartImg
中午看《眾妙之門》看到一個(gè)響應(yīng)式圖片處理工具（點(diǎn)此查看）的介紹，然后就心血來(lái)潮想著不妨自己寫一個(gè)基于JQ的吧，于是就又有了這么一個(gè)干貨給大家。
smartImg?的全部文件可以從我的Github上下載，其實(shí)它非常小巧，去掉注釋一共也就40行，之所以這么輕便，JQ也是幫了大忙。
應(yīng)用場(chǎng)景
我們?cè)诖罱憫?yīng)式頁(yè)面時(shí)，對(duì)于圖片的處理或多或少都有些煩躁，例如我們希望在某個(gè)屏寬的環(huán)境下顯示某一張圖片，在另一個(gè)屏寬的環(huán)境下則顯示為另一張圖片。
這種做法對(duì)于用戶體驗(yàn)是比較重要的，常規(guī)建議是用戶用大屏幕設(shè)備訪問(wèn)我們頁(yè)面時(shí)，圖片顯示為大分辨率的；若用戶使用小屏幕的移動(dòng)設(shè)備訪問(wèn)我們頁(yè)面時(shí)，依舊加載大尺寸的圖片顯然是很不妥當(dāng)?shù)淖龇?#xff0c;這樣太吃用戶流量，也影響加載速度。
我們的確可以用一個(gè)設(shè)置有background的容器來(lái)替代圖片，然后在css media query中定義不同屏寬范圍下該容器背景所對(duì)應(yīng)的地址，但這種寫法較為繁瑣、不利維護(hù)和seo（當(dāng)然它的效率會(huì)高一些）。
smartImg為解決這個(gè)問(wèn)題提供了方案。
使用方式
在頁(yè)面引入了jQuery和smartImg文件之后，在需要響應(yīng)的<img>標(biāo)簽里添加 s-src="圖片地址1 屏寬1,圖片地址2 屏寬2, ..., 圖片地址n 屏寬n" ，若屏寬參數(shù)沒(méi)寫則默認(rèn)為0。
如下示例：
<img s-src="img/large.jpg 900,img/huge.jpg 1100,img/small.jpg" />它表示當(dāng)屏幕寬度大于1100px時(shí)顯示img/huge.jpg，當(dāng)屏幕寬度小于1100px但大于900px時(shí)顯示img/large.jpg，其它更小屏幕寬度時(shí)則顯示img/small.jpg。
當(dāng)然，如果圖片地址前綴是一樣的，我們還可以加上s-prefix屬性：
<img s-prefix="img/" s-src="large.jpg 900,huge.jpg 1200,middle.jpg 650,small.jpg 0" />smartImg也為頁(yè)面動(dòng)態(tài)圖片提供方案，在圖片動(dòng)態(tài)地新增后執(zhí)行 $.smartImg() 方法即可。
雖然初衷是將其用于移動(dòng)頁(yè)面，但smartImg也可用于PC頁(yè)面，支持屏幕大小縮放事件。
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>效果：
更具體的體驗(yàn)請(qǐng)下載 smartImg 后自行運(yùn)行demo.html來(lái)查看。
共勉~
總結(jié)
以上是生活随笔為你收集整理的继续送假期干货——响应式图片工具smartImg的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： cursor 的moveToFirst和
- 下一篇： Restive.js – 轻松让网站变成