javascript - 使用 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-property 始终包含完整路径；代码将因相对路径而失败。