如何用 jquery 替换 img src 以获得不同的窗口大小？答案

【问题标题】：How to replace img src with jquery for different window size?如何用 jquery 替换 img src 以获得不同的窗口大小？
【发布时间】：2015-03-19 07:23:54
【问题描述】：

在这个问题上真的很挣扎。我正在尝试为不同的窗口宽度（响应式设计）替换 img src，但我无法让它工作。如果我使用$(window).resize()，它可以正常工作，但这只会改变实际窗口大小的图像 src，将浏览器窗口向后和第四次拖动。

我无法做到的是在加载时使用所需的 img src，而不管调整浏览器窗口的大小。我知道这有点令人困惑，所以我下面的代码将解释我想要做得更好的事情。非常感谢您对此的帮助！

$(function(){
        if($(window).width() >= 0 && $(window).width() <= 400){
           $("img").attr("src","small.jpg");
        }
        else if($(window).width() > 400 && $(window).width() <= 768){
           $("img").attr("src","medium.jpg"); 
        }
        else{
           $("img").attr("src","large.jpg"); 
        }
    });

【问题讨论】：

我真的不明白为什么你的代码不应该像现在这样工作......
我知道我已经盯着它看了好几个小时，寻找小错误，但它就是行不通！它只会加载我的 html 中的标准 img src。如果我使用$(window).resize() 而不是$(function())，图像将会改变，但如果你知道我的意思，我不想拖动浏览器来强制改变图像。
您为什么通过 JS 而不是 CSS @media 声明来执行此操作？这样您就不必缩小图像了吗？
正是如此，加上使用@media，我不得不使用背景图像并设置height 和width，这会破坏图像的响应能力，除非你知道更好的方法？
正如预期的那样，它运行良好：jsfiddle.net/ta7fss9d/1您做错了其他事情，该代码是正确且有效的。

标签： javascript jquery css responsive-design

【解决方案1】：

我对原始帖子有一个轻微的替代方法来更改图像源，因为我还在页面调整大小上做了一些我不想使用@media 做的事情。

$(window).resize(function() {
        if ($(window).width() > 1130) {
            $('#logo').attr("src", "large.jpg");
        }
        else {
            $('#logo').attr("src", "small.jpg");
        }
    });

由于我在调整大小（用于导航菜单）时还有其他一些更改，我可以在 if/else 中列出所有内容。

【讨论】：

【解决方案2】：

好的，得到这个工作。代码一直都是正确的，我只是愚蠢，并没有将我的文件通过 FTP 传回服务器！！！感谢您帮助人们非常感谢它。至少人们现在知道如何做到这一点，而无需使用@media 来为每个屏幕尺寸使用不同的图像！！！！

【讨论】：

【解决方案3】：

如果您已经使用 $(window).resize()，您可以尝试在加载文档时触发 resize 事件。

$(window).trigger('resize');

【讨论】：

嗨，迈克，感谢您的回答。不幸的是，这也不起作用。我缺少一些东西！