0

我正在尝试通过 JQuery 检测浏览器大小来加载不同的图像。实现代码如下，

$(window).resize(function(){
        var w_size = $(window).width();
        var img_src = $("img").attr("src");

        if (w_size < 400) {
            var new_s_image = img_src.replace(".", "_s.");
            $("img").attr("src",new_s_image);
        }else if (w_size < 780){
            var new_m_image = img_src.replace(".", "_m.");
            $("img").attr("src",new_m_image);
        }
    });

现在的问题是每次我调整窗口大小时，它都会附加“_s”。或“_m”。例如：图像/image_m_m_m.jpg。我需要附加“_s”。或“_m”。即使用户无数次调整窗口大小，字符也只有一次。

4

6 回答 6

1

尽管有 css 替代品，但正如您所要求的，这里是我的 jQuery 解决方案。

此代码将处理多个图像，并且可以添加另一个条件而无需太多麻烦。

代码是：

$(window).resize(function () {
    $("img").each(function() {
        var w_size = $(window).width();
        var img_src = $(this).attr("src").replace("_m", "").replace("_s", "");
        var new_image = (w_size < 400) ? img_src.replace(".", "_s.") : (w_size < 780) ? new_image = img_src.replace(".", "_m.") : img_src;
        $(this).attr("src", new_image);
    });
});

你可以在这个JSFiddle中看到这个工作

于 2013-03-20T08:59:45.730 回答
1

相当多的人会建议基于 CSS 的解决方案，这可能是一个不错的选择。

如果您仍然喜欢使用 jQuery，则需要修改一些内容：

  1. 给你的正常状态一个后缀img src

    例如：myimage_n.jpg

  2. 更改更新文件名的方式。

    除了用新字符替换点之外img_src.replace(".", "_s.")，您还可以这样做：

    trimmedSrc = myImageSrc.substr(0, myImageSrc.length - 5);
var newSrc = trimmedSrc + 'm.jpg';
myImage.attr("src", newSrc);

工作示例：http: //jsfiddle.net/shodaburp/wvyF6/

清理代码：http: //jsfiddle.net/shodaburp/wvyF6/2/

于 2013-03-21T04:17:29.350 回答
0

我认为每次浏览器的大小发生变化时都不需要更改图像。您可能希望采用响应式处理图像大小的方式。

例如，以下示例将使您的所有图像都具有响应性：

img {  
    height: auto;  
    max-width: 100%;   
}

更改src属性中的图像是多余的，因为最后，由于每个图像都将被重新加载，这将导致过多的带宽消耗。另外，由于您不必处理图像的多个版本，这将在您的开发过程中为您节省大量时间。

于 2013-03-20T08:25:45.230 回答
0

对于您的图像，使用扩展名作为“_s”。和'_m。对于特定和正常的图像作为“_n”。如果要替换，则可以替换“_n”。用'_m。或“_s”。并且它们不会一次又一次地附加

$(window).resize(function(){
    var w_size = $(window).width();
    var img_src = $("img").attr("src");

    if (w_size < 400) {
        var new_s_image = img_src.replace("_n.", "_s.");
        $("img").attr("src",new_s_image);
    }else if (w_size < 780){
        var new_m_image = img_src.replace("_n.", "_m.");
        $("img").attr("src",new_m_image);
    }else if (w_size > 780){
        var new_m_image = img_src.replace("_m.", "_n.");
        var new_m_image = new_m_image.replace("_s.", "_n.");
        $("img").attr("src",new_m_image);
    }
});
于 2013-03-20T08:28:40.710 回答
0

你为什么不只是添加一个封面图片。 

html {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

于 2013-03-20T08:28:57.483 回答
0

我建议使用媒体查询来控制当前可见的图像版本。考虑以下示例（我用 class 表示小图像，用 表示s普通图像m）：

CSS：

@media all and (max-width: 400px) {
    .s {display: block;}
    .m {display: none;}
}
@media all and (min-width: 400px) {
    .m {display: block;}
    .s {display: none;}
}

以及 IE<9 的 jQuery 后备：

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 400) {
        $('body').addClass('small');
    }
    else if (width > 400) {
        $('body').removeClass('small');
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

http://jsfiddle.net/KGdyD/

在 HTML 中，您将有两张图像，但有时只能看到一张。

于 2013-03-20T08:30:34.020 回答