4

根据浏览器尺寸换出图像时，我有点进退两难。

我的页面上有一组图像，我需要在调整浏览器大小时将其关闭。我基本上已经将我所有的图像分成了特定宽度的子文件夹。IE。我有一个名为“1280”、“1152”、“1024”等的文件夹。当浏览器重新调整大小并命中正确的断点时，我使用 javascript 来查找和替换文件夹名称。

就目前而言，我拥有的代码确实有效，但仅在重新加载页面时才有效。如果用户按住鼠标并调整窗口大小，则路径不会改变，或者更确切地说，在第一个断点被击中后它们似乎不会改变，即。从宽度 > 1280 像素到小于 1152 像素。

问题是我已经花了一整天的时间编码，而我只是在一天结束时才进入这个..所以我的头脑已经完全模糊了，我无法从逻辑上思考这个问题！如果有人可以在这里帮助我，我将不胜感激，因为我的截止日期很紧，我需要完成它。

我已经精简了代码以使其更清晰，但这是我到目前为止所拥有的：

<img src="/images/1280/img1.jpg" alt="" class="swap" />
<img src="/images/1280/img2.jpg" alt="" class="swap" />
<img src="/images/1280/img3.jpg" alt="" class="swap" />
<img src="/images/1280/img4.jpg" alt="" class="swap" />
<img src="/images/1280/img5.jpg" alt="" class="swap" />

和javascript：

function checkResolution() {
    // Resolution width > 1280px
    if ($(window).innerWidth() > 1280) {
        replaceImagePaths("1280");
    }
    // Resolution 1152px - 1279px
    else if ($(window).innerWidth() >= 1152 && $(window).innerWidth() <= 1279) {
        replaceImagePaths("1152");
    }
    // Resolution width 1024px - 1151px
    else if ($(window).innerWidth() >= 1024 && $(window).innerWidth() <= 1151) {
        replaceImagePaths("1024");
    }
    // Resolution width 768px - 1023px
    else if ($(window).innerWidth() >= 768 && $(window).innerWidth() <= 1023) {
        replaceImagePaths("768");
    }
    // Resolution width < 768px
    else if ($(window).innerWidth() <= 767) {
        replaceImagePaths("mobile");
    }
}

$(window).resize(function() {
    checkResolution();
});

$(document).ready(function() {
    checkResolution();
});

function replaceImagePaths(resolution) {
    // Switch images
    $('.swap').each(function() {
        var imagePath = $(this).attr('src');
        $(this).attr('src', imagePath.replace("mobile", resolution));
        $(this).attr('src', imagePath.replace("768", resolution));
        $(this).attr('src', imagePath.replace("1024", resolution));
        $(this).attr('src', imagePath.replace("1152", resolution));
        $(this).attr('src', imagePath.replace("1280", resolution));
    }
}​

奇怪的是，假设您从大于 1280 的浏览器宽度开始并向下调整大小，则路径将切换到下一次测量，即。从 1280 到 1152，但之后它似乎不起作用。但是，在重新调整大小后刷新页面时，它们都会起作用。

我知道这与我的 replaceImagePaths() 函数有关，但我不知道哪里出错了。该功能背后的理论是我只是全面替换每条路径，但似乎我正在覆盖这些值。我不确定。那里肯定发生了一些古怪的事情。

谢谢你的帮助！

（ps 我意识到有很多替代方法可以根据浏览器大小切换图像，但在这种特殊情况下，我必须使用 js 来这样做）

4

2 回答 2

4

可能是您没有在 replaceImagePaths 函数中正确关闭 jQuery 循环吗？我还对代码进行了其他一些小的改进。

function checkResolution() {
    // Resolution width > 1280px
    if ($(window).innerWidth() > 1280) {
        replaceImagePaths("1280");
    }
    // Resolution 1152px - 1279px
    else if ($(window).innerWidth() >= 1152 && $(window).innerWidth() <= 1279) {
        replaceImagePaths("1152");
    }
    // Resolution width 1024px - 1151px
    else if ($(window).innerWidth() >= 1024 && $(window).innerWidth() <= 1151) {
        replaceImagePaths("1024");
    }
    // Resolution width 768px - 1023px
    else if ($(window).innerWidth() >= 768 && $(window).innerWidth() <= 1023) {
        replaceImagePaths("768");
    }
    // Resolution width < 768px
    else if ($(window).innerWidth() <= 767) {
        replaceImagePaths("mobile");
    }
}


function replaceImagePaths(resolution) {
    // Switch images
    $('img.swap').each(function(){
        var imagePath = $(this).attr('src');

        $(this).attr('src', imagePath.replace(/mobile|768|1024|1152|1280/, resolution));//with the right regex you can do it all in one

    });//was missing the  ");"
}

$(window).resize(function() {
    checkResolution();
});

$(function(){
    checkResolution();
});
于 2012-09-13T22:02:51.293 回答
0

我的建议是用带有新 src 的新图像元素完全替换图像元素，因为我会说浏览器认为图像元素已经加载了它的图像并忽略对 src 属性的更改。

于 2012-09-13T21:44:34.157 回答