javascript - 如何在调整窗口大小时更改 img src？

Question

我在根据浏览器尺寸换出图像时遇到了一些难题。

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

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

问题是我花了一整天的时间编写代码，直到一天快结束时才开始处理这个问题。所以我的头脑已经完全模糊了，我无法从逻辑上思考这个问题!如果有人可以在这里帮助我，我将不胜感激，因为我的截止日期很紧，我需要完成这项工作。

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

<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() 函数有关，但我无法弄清楚哪里出错了。该功能背后的理论是，我只是全面替换每条路径，但似乎我正在覆盖这些值……我不确定。那里肯定发生了一些古怪的事情。

感谢您的帮助!

(p.s 我知道有很多替代方法可以根据浏览器大小切换图像，但在这种特殊情况下，我必须使用 js 来这样做)

Answer 1

会不会是您没有在 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();
});