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

How to replace img src with jquery for different window size?

本文关键字：窗口大小 jquery 何用 替换 img src      更新时间：2023-09-26

真的很挣扎。我正在尝试为不同的窗口宽度（响应式设计）替换 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"); 
        }
    });

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

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

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

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

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

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

相关文章：