用jQuery更改img src而不多次加载图像？答案

【问题标题】：Change img src with jQuery without loading the image multiple times?用jQuery更改img src而不多次加载图像？
【发布时间】：2016-06-23 18:32:08
【问题描述】：

我使用 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");
}
});

【问题讨论】：

也许去抖会是一个很好的用例davidwalsh.name/javascript-debounce-function
确定这不仅仅是因为您在开发工具设置中启用了“禁用缓存（在 DevTools 打开时）”...？
@CBroe 是的，我刚刚检查并启用了缓存
@AlexanderSolonik 去抖动功能只会推迟图像的加载，而不是阻止它
使用 srcset 或 picture，具体取决于您的用例（分辨率切换或艺术指导）。对于不支持的浏览器，有很好的 polyfill 解决方案。

标签： javascript jquery image

【解决方案1】：

此类事情需要通过 css 来完成：

基本上，您以涵盖所有内容的方式构建 dom，然后通过媒体查询显示您想要的内容。

另一个更优雅的解决方案可能是使用 srcset but IE doesn't support it

.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">

【讨论】：

谢谢@Hitmands，这就是我一开始所做的，但后来我注意到这三个图像是一起加载的。由于我正在开发一个响应式网站，因此我只想加载一张图片并在调整窗口大小时对其进行更改

【解决方案2】：

试试这个

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 总是包含完整路径；代码将因相对路径而失败。

【讨论】：