Question

根据浏览器尺寸，我有一个更换图像的困境。

我的页面上有一组图像，我需要在调整浏览器大小时将其切换出来。我基本上将我的所有图像划分为子文件夹以获得特定的宽度。即。我有一个名为'1280'，'1152'，'1024'等的文件夹。当浏览器重新调整大小并且它达到正确的断点时，我使用javascript来查找和替换文件夹名称。

按照目前的情况，我的代码可以工作，但只有在重新加载页面时才能工作。如果用户将鼠标按下并调整窗口大小，则路径不会改变，或者看起来在第一个断点被击中后它们不会改变。从宽度＆gt; 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();
});

Answer 2

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

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

2 个答案: