jQuery Mobile: условные размеры изображения (телефон/планшет)

Question

Наш сайт на базе jQuery Mobile будет использоваться крупными планшетами и телефонами на экране.

Некоторые изображения, которые мы хотели бы иметь при использовании на телефоне.

Например,

myImage_large.png 
myImage_small.png 

Есть ли способ использования данных тег или какой-либо другой JQuery-мобильный способ указать в теге IMG, что на небольших устройствах, следует использовать меньшее изображение.

Answer 1

Отзывчивые образы [https://github.com/filamentgroup/Responsive-Images] похоже, что он может быть близок к тому, что вы ищете. Это не обязательно jQuery/mobile, но он загружает разные размеры на основе разрешения экрана.

Answer 2

Если вы используете элементы блока с background-image s, вы можете указать в CSS источник изображения, который позволяет вам создать медиа-запрос, который загружает только правильное изображение. Большинство мобильных браузеры поддерживают медиа-запросы, так что это хорошая идея, чтобы начать с высоким разрешением по умолчанию, и затем использовать медиа-запрос, чтобы изменить background-image источник в Lo-Рез:

/*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); 
    }); 

}); 

использовать этот HTML

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