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

梅問題-《Picturefill 自適應圖片》隨著裝置提供不同大小的圖檔(JS版)
  一直以來無論使用任何一套的RWD Framework,都會支援圖片自適應的功能,但這些圖片自適應,充其量只是修改圖片的比例大小,但檔案依舊,所以這對於行動族群來說,一點幫助也沒,讀取的圖檔與一般的桌機是一樣的,雖然之前梅干有分享過,第三方的解決辦法,但不知是否使用的人太多,而吹熄燈號了,所以只好自己當自強啦!而梅干也一直不斷尋找相當的解決辦法,最近發現一套JS版的,它則是透過html5的picture的標籤,來實現在不同的裝置的解析,載入相對應的圖檔大小,如此一來在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版)
[範例預覽] [範例下載]

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

jQuery取得各裝置視窗實際顯示的寬度、高度

jQuery取得各裝置視窗實際顯示的寬度、高度

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQeury外掛「scroll-scope」鎖定DIV區塊滾動範圍

jQuery教學-RWD自適應導覽列多層級下拉選單

jQuery教學-RWD自適應導覽列多層級下拉選單





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    sheepy 說道:

    只要由小放到大,就是按照解析度逐步讀取,為什麼還需要JS呢?

    回應:
    那只有寬度,檔案大小不會變,而此方法是依照解析下載所需的圖片尺寸
  • 第1梅
    高藥師 說道:

    所以是載入不同解析度,造成比較好讀取嗎?

    回應:
    是依裝置解晰,找入不同大小的檔案