使用jQuery更改img src而不多次加載圖像？

Question

我使用jQuery編寫了一個腳本，該腳本可在調整窗口大小並正確運行時更改HTML中img標記的src屬性。 但是，我使用Chrome的開發人員工具注意到， 每次調整窗口大小時，都會加載實際的圖像！ 換句話說，如果用戶反復調整窗口大小，則圖像將一次又一次地加載。 有什么方法可以避免這種情況，以便圖像最多加載一次？

這是我的代碼：

$(window).resize(function() {
    if ($(window).width() <= 480) {
    $(".on-demand-img").attr("src", "http://img1.coastalliving.timeinc.net/sites/default/files/image/2012/06/beaches/0612_best-beaches-kapalua-m.jpg");
} else if ($(window).width() <= 768) {
    $(".on-demand-img").attr("src", "https://s-media-cache-ak0.pinimg.com/736x/fa/6f/9a/fa6f9a5f7577a578bb7d63bf458d2905.jpg");
} else {
    $(".on-demand-img").attr("src", "https://imageserver.avenso.com/imageserver/bilder/paesaggi-sole-scattered-clouds-0:0:4b04507422128:1b762d.jpg");
}
});

Answer 1

嘗試這個

function setImageSrc(img, src){
    //images have a src-property you should use, 
    //instead of messing with the attribute
    $(img).each(function(){
        this.src === src || (this.src = src);
    });

    /*
    $(img).filter(function(){
        return this.src !== src;
    }).attr('src', src);
    */
}

$(window).resize(function() {
    var w = $(window).width();
    setImageSrc(".on-demand-img", 
        w <= 480? "http://img1.coastalliving.timeinc.net/sites/default/files/image/2012/06/beaches/0612_best-beaches-kapalua-m.jpg":
        w <= 768? "https://s-media-cache-ak0.pinimg.com/736x/fa/6f/9a/fa6f9a5f7577a578bb7d63bf458d2905.jpg":
        "https://imageserver.avenso.com/imageserver/bilder/paesaggi-sole-scattered-clouds-0:0:4b04507422128:1b762d.jpg"
    );
});

編輯：我發現仍然有一個錯誤。 src屬性始終包含完整路徑。 代碼將相對路徑失敗。

Answer 2

諸如此類的事情需要通過CSS完成：

基本上，您以覆蓋所有內容的方式構建自己的dom，然后通過媒體查詢顯示所需內容。

另一個更優雅的解決方案可能是使用srcset 但IE不支持它

 .visible-xs, .visible-lg, .visible-sm { display: none; } @media (max-width: 500px) { .visible-xs { display: block; } } @media (min-width: 501px) and (max-width: 1199px) { .visible-sm { display: block; } } @media (min-width: 1200px) { .visible-lg { display: block; } } 

 <img class="visible-lg" src="pat/to/lg" alt="BIG IMAGE"> <img class="visible-sm" src="pat/to/sm" alt="MEDIUM IMAGE"> <img class="visible-xs" src="pat/to/xs" alt="SMALL IMAGE">