jQuery Mobile：條件圖片尺寸（電話/平板電腦）

Question

我們基於jQuery Mobile的網站將被大屏幕平板電腦和手機使用。

在手機上使用時，我們希望有一些圖像較小。

例如，

myImage_large.png 
myImage_small.png 

是否有使用數據標籤或一些其它jQuery的移動方法中，關於較小的設備應該使用的更小的圖像一個IMG標記來指定的方法。

Answer 1

響應式圖像[https://github.com/filamentgroup/Responsive-Images]看起來像它可能非常接近你正在尋找。這不一定是jQuery /移動特定的，但它根據屏幕分辨率加載不同的大小。

Answer 2

如果您使用的塊元素爲background-image s，您可以在CSS中指定圖像的來源，它允許您創建只加載適當圖像的媒體查詢。大多數移動瀏覽器都支持媒體查詢，以便它開始與高分辨率的默認，然後使用媒體查詢更改background-image源到羅水庫是個好主意：

/*set source for hi-res images here (default)*/ 
#image-1 { 
    position : relative; 
    width : ...px; 
    height : ...px; 
    display : inline-block; 
    background-image : url(/images/this-image-hi.jpg); 
} 
@media all and (max-width:480px) { 
    /*set source for lo-res images here*/ 
    #image-1 { 
     background-image : url(/images/this-image-lo.jpg); 
    } 
} 

然後你的形象標籤將被改變是這樣的：

<div id="image-1"></div> 

您還可以設置源屬性的所有影像複製到空白的像素，然後有一個JavaScript函數改變document.ready它們的來源：

$(function() { 
    if (HI-RES) { 
     $('img[data-src-hi]').each(function (index, element) { 
      this.src = $(this).attr('data-src-hi'); 
     }); 
    } else { 
     //output lo-res images 
     $('img[data-src-lo]').each(function (index, element) { 
      this.src = $(this).attr('data-src-lo'); 
     }); 
    } 
}); 

這需要你的形象標籤，看起來像這樣：

<img src="/images/blank-pixel.png" width="xx" height="xx" data-src-hi="/images/this-image-hi.jpg" data-src-lo="/images/this-image-lo.jpg" /> 

Answer 3

如果你真的希望它迴應你必須添加在平板電腦調整大小和智能手機旋轉設備將是調整的事件，所以你應該使用調整事件在這裏引發的變化是什麼，我做了一個例子：

function responsiveImage(hi_res) { 
    if (hi_res) { 
     $('img[data-src-hi]').each(function (index, element) { 
      $(this).attr("src",$(this).attr('data-src-hi')); 
     }); 
    } else { 
     //output lo-res images 
     $('img[data-src-lo]').each(function (index, element) { 
      $(this).attr("src",$(this).attr('data-src-lo')); 
     }); 
    } 
} 



$(function(){ 
    var hi_res = false; 
    var max_width = 480; 

    if($(window).width()>max_width){ 
     hi_res = true; 
    } 
    responsiveImage(hi_res); 

    $(window).resize(function() { 
     if($(window).width()>max_width){ 
      hi_res = true; 
     }else{ 
      hi_res = false; 
     } 
     responsiveImage(hi_res); 
    }); 

}); 

使用這個網站

<img data-src-hi="/media/img/large_img.png" data-src-lo="/media/img/small_img.png" src="" />