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

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

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

Например,

myImage_large.png
myImage_small.png

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

3 ответа

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


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

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

Тогда ваш тег изображения будет изменен на что-то вроде:

Вы также можете установить все атрибуты исходного изображения на пустой пиксель, а затем изменить функцию 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');
 });
 }
});

Для этого нужно, чтобы ваши теги изображений выглядели следующим образом:


если вы действительно хотите, чтобы он ответил, вам нужно добавить событие изменения размера в планшете и смартфонах, вращающееся устройство будет изменяться, поэтому вы должны использовать событие изменения размера, чтобы инициировать изменения, вот пример того, что я сделал:

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

                            

licensed under cc by-sa 3.0 with attribution.