Question

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

$(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。”例如： images / image_m_m_m.jpg 。我需要附加“_s”。或“_m。”即使用户无数次调整窗口大小，也只有一次。

Answer 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

中看到这一点

Answer 2

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

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

在img src
上为正常状态提供后缀
例如：myimage_n.jpg

更改更新文件名的方式。

而不是仅用新字符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/

Answer 3

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

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

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

更改src属性中的图像是过度的，因为最终会因为每个图像都要重新加载而导致带宽消耗过多。此外，由于您不必处理多个版本的图像，因此在开发过程中可以节省很多的时间。

Answer 4

您的图片使用扩展名为“_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);
    }
});

Answer 5

为什么不添加封面图片？



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;
}

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; }

Answer 6

我建议使用媒体查询来控制当前可见的图像版本。请考虑以下示例（我使用类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的jQuery回退＆lt; 9：

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中，您将拥有两张图片，但只有一张图片会在时间显示。

通过检测窗口大小来替换图像

6 个答案: