Javascript 加载带有媒体查询的base64编码图像

我的手机网站上有很多小图片。因此，我加载了用css编码的base64

<link rel="stylesheet" media="max-resolution: 239dpi" href="small-images-base64.css" />
<link rel="stylesheet" media="min-resolution: 240dpi" href="big-images-base64.css" />

---

问题是small-images-base64.css和big-images-base64.css都将被加载。有没有办法只加载我真正需要的数据？

只要你链接CSS，就会加载CSS

一个解决方案是制作更多的css文件，并根据页面只加载所需的文件

另一种可能是，如果您将图像从CSS中取出，并直接加载到html中，就像

<img src="data:image/gif;base64,AAAAAAAA........"/>

我无法制作更多css，因为我只有一个页面：（要直接加载html格式的图像，我必须知道服务器上需要哪些资源，我希望避免这些资源。我希望仅依靠客户端加载不同的资源。正如我之前所说，CSS将始终完全加载。如果您希望依靠客户端加载不同的资源，为什么不将所有不常见的资源都放在服务器上所有客户端都在不同的img文件中输出？因为例如，有100个不同的非常小的图像，会有100个对服务器的请求。因此，这些图像是base64到css的内联线。这是不可能的，您必须在服务器上知道客户端想要什么，然后生成定制的base64 css或base64.T中包含图像的html这是减少请求大小和数量的唯一方法。浏览器（客户端）总是下载链接的所有资源，无论它们是否显示，这是另一回事。