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

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

1 голос
/ 14 января 2012

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

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

Например, 

myImage_large.png
myImage_small.png

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

Ответы [ 3 ]

4 голосов
/ 14 января 2012

Если вы используете блочные элементы с background-image s, вы можете указать в 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);
    }
}

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

<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" />
0 голосов
/ 18 января 2013

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

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="" />
0 голосов
/ 14 января 2012

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

...