jQuery Mobile：条件图像尺寸（手机/平板电脑）答案

【问题标题】：jQuery Mobile: Conditional Image Sizes (Phone/Tablet)jQuery Mobile：条件图像尺寸（手机/平板电脑）
【发布时间】：2012-02-10 01:50:17
【问题描述】：

我们基于 jQuery Mobile 的网站将被大屏幕平板电脑和手机使用。

我们希望在手机上使用时缩小一些图像。

例如，

myImage_large.png
myImage_small.png

有没有办法使用数据标签或其他一些 jQuery-mobile 方法在 img 标签中指定在较小的设备上应该使用较小的图像。

【问题讨论】：

标签： jquery iphone jquery-mobile tablet

【解决方案1】：

如果您使用带有background-images 的块元素，您可以在 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" />

【讨论】：

【解决方案2】：

响应式图像 [https://github.com/filamentgroup/Responsive-Images] 看起来可能与您要查找的内容非常接近。它不一定是 jQuery/mobile 特定的，但它会根据屏幕分辨率加载不同的尺寸。

【讨论】：

只是提醒一下，此答案中的链接指向顶部状态的页面：Note: Project no longer recommended!

【解决方案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="" />

【讨论】：