更改每个图像源以加载较小的版本

Question

我想更改网站上每张图片的来源（<img>和background-image）。我该怎么办才能不加载那些大图像，而是更改源代码以从另一个文件夹加载较小的版本？简单：

$('img').each(function() {
    var src = $(this).attr('src');
    $(this).attr('src', '/small'+src);
});

这会有用吗？

Answer 1

这不起作用。浏览器将首先加载大图像，如果您获得了正确的代码（上面的代码不够），它将加载新的代码。

我个人建议使用新的<picture>代码，让浏览器根据视口及其浏览的设备选择所需的图片。

Here is more information about the element in MDN

Answer 2

不，这不起作用。在浏览器中加载页面后，可能会运行此脚本。因此，在运行此脚本之前，所有图像都已加载到浏览器中。

请考虑为此更改服务器端代码，或使用延迟加载库，例如this。