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

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()，您可以尝试在加载文档时触发调整大小事件。

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