如何防止桌面站点上的图像在手机上加载？

Question

因此，我目前有一个网站会根据屏幕大小加载两个不同的版本：一个用于桌面，一个用于移动。由于某些原因，我在网站的桌面版本上显示的图像会在移动版本上加载。

是否有办法阻止这些图像在移动设备上加载以增加性能/加载时间？我不是在谈论显示：无;属性/在移动设备上隐藏图片，我试图阻止它们甚至将它们全部加载在一起。

如果您想看一下网站，请点击以下链接：https://rubyredsound.com

Answer 1

我看到您是这样添加了JQuery tagg的：

<figure class="image"></figure>

$(document).ready(function(){
    var w = window.innerWidth;
    if(w >= 600){
      $(".image").html("<img src='big-image.jpg'/>")
    }
    else{
      $(".picture").html("<img src='small-image.jpg'/>")
    }
});