close
梅問題‧教學網【Minwt】

♣梅問題‧教學網【Minwt】♣

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

Posted: 20 Apr 2015 03:00 PM PDT

梅問題－《Picturefill 自適應圖片》隨著裝置提供不同大小的圖檔(JS版)
　　一直以來無論使用任何一套的RWD Framework，都會支援圖片自適應的功能，但這些圖片自適應，充其量只是修改圖片的比例大小，但檔案依舊，所以這對於行動族群來說，一點幫助也沒，讀取的圖檔與一般的桌機是一樣的，雖然之前梅干有分享過，第三方的解決辦法，但不知是否使用的人太多，而吹熄燈號了，所以只好自己當自強啦!而梅干也一直不斷尋找相當的解決辦法，最近發現一套JS版的，即可解決此問題，可依不同裝置的解析，讀取相對的圖檔，如此一來在3G吃不飽，4G又不穩的情況下，真是一大福音，而目前這個方法是用JS來進行切換，因此在作圖時，就多存幾個檔案就可以了，至於怎麼用現在就一塊來看看吧!
Picturefill：
套件名稱：Picturefill
套件網址：http://scottjehl.github.io/picturefill/
Javascript：
放在</body>前：
<script>
//要套用的HTML元素
document.createElement( "picture" );
</script>
<script src="picturefill.min.js"></script>
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>
梅問題－《Picturefill 自適應圖片》隨著裝置提供不同大小的圖檔(JS版)
馬上來實測一下，這時就會依照不同的裝置大小，分別載入不同的圖檔大小，如此一來圖片自適應才有達到此效果，這是JS版改天再來分享PHP自動產生的方法。
梅問題－《Picturefill 自適應圖片》隨著裝置提供不同大小的圖檔(JS版)
[範例預覽] [範例下載]
arrow
arrow
    全站熱搜

    knoledge 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄