Question

真的很难与这个人挣扎。我正在尝试将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"); 
        }
    });

Answer 1

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

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

Answer 2

好的，让这个工作了。代码是正确的我只是愚蠢，并没有FTP我的文件回到服务器！感谢帮助人们真的很感激。至少人们知道如何在不使用@media每个屏幕大小使用不同图像的情况下完成此操作!!!!

Answer 3

与原始帖子相比，我有一个略微的选择来更改图像源，因为我还在页面调整大小上做其他一些我不想使用@media的事情。

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

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

如何用不同窗口大小的jquery替换img src？

3 个答案: