如何用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()，您可以嘗試在加載文檔時觸發 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 中列出所有內容。