根据浏览器宽度加载图像-Loadinganimagebasedonbrowserwidth

2  

Only to complete this thread, you could also try the HTML picture Tag.

只有完成此线程，您还可以尝试HTML图片标记。

But be careful. IE does not support this solution.

不过要小心。 IE不支持此解决方案。

See MDN for more informations.

有关更多信息，请参阅MDN。

If you need to added classes to that picture-element you could do it like this:

如果你需要为该picture-element添加类，你可以这样做：

2  

css solution

You doesn't need js to achieve it, you could use css media inquiries to do that, like below.

你不需要js来实现它，你可以使用css媒体查询来做到这一点，如下所示。

img.abc {display:block;}
img.xyz {display:none;}

@media (min-width:500px) {
  img.abc {display:none;}
  img.xyz {display:block;}
}

Make JS from stop loading both the images

The browser will load any images that has a src attribute set, so what you want to do is to use data-src in the markup and use Javascript to set the src attribute like below:

浏览器将加载任何具有src属性集的图像，因此您要做的是在标记中使用data-src并使用Javascript设置src属性，如下所示：

var abc = $(".abc").data("src"),
   abc_alt = $(".abc").data("alt"),
   xyz = $(".xyz").data("src"),
   xyz_alt = $(".xyz").data("alt");

if (window.innerWidth > 500) {
    $(".xyz").attr("src",xyz);
    $(".xyz").attr("alt",xyz_alt);
} else {
    $(".abc").attr("src",abc);
    $(".abc").attr("alt",abc_alt);
}