《Picturefill 自適應圖片》隨著裝置提供不同大小的圖檔(JS版)

梅干 2015/04/20 1 分鐘閱讀

　　一直以來無論使用任何一套的RWD Framework，都會支援圖片自適應的功能，但這些圖片自適應，充其量只是修改圖片的比例大小，但檔案依舊，所以這對於行動族群來說，一點幫助也沒，讀取的圖檔與一般的桌機是一樣的，雖然之前梅干有分享過，第三方的解決辦法，但不知是否使用的人太多，而吹熄燈號了，所以只好自己當自強啦!而梅干也一直不斷尋找相當的解決辦法，最近發現一套JS版的，它則是透過html5的picture的標籤，來實現在不同的裝置的解析，載入相對應的圖檔大小，如此一來在3G吃不飽，4G又不穩的情況下，對於使用者來說真是一大福音，而目前這個方法是用JS來進行切換，因此在製作圖檔時，就多存幾個檔案即可解決，至於怎麼用現在就一塊來看看吧!

Picturefill：

套件名稱：Picturefill
套件網址：http://scottjehl.github.io/picturefill/

Javascript：

放在</body>前：

HTML：

放在<body>….</body>間：

<picture>
　<!– 當解析度大於900像素時，載入此圖–>

　
<source srcset="images/extralarge.jpg" media="(min-width: 900px)">
　<!– 當解析度大於800像素時，載入此圖–>
　 <source srcset="images/large.jpg" media="(min-width: 800px)">
　<!– 當解析度大於400像素時，載入此圖–>
　
<source srcset="images/medium.jpg" media="(min-width: 400px)">
　
<img srcset="images/small.jpg" alt="">
</picture>