简体   繁体   English

使用媒体查询加载base64编码的图像

[英]Loading base64 encoded images with media queries

I have a plenty of small images in my mobile web site. 我的移动网站上有很多小图像。 Therefore I load them base64 encoded in css. 因此,我加载它们在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" />

The problem is that both small-images-base64.css and big-images-base64.css will be loaded anyway. 问题在于无论如何都会同时加载small-images-base64.css和big-images-base64.css。 Is there any way to load only the data i really need? 有什么方法可以只加载我真正需要的数据吗?

the CSS will always be loaded as long you link them. 只要您链接CSS,它们就会一直加载。

One solution would be to make more css files and load only the ones you need depending on the page. 一种解决方案是制作更多的CSS文件,并根据页面仅加载所需的文件。

Another could be if you take the images out of the CSS and load the in the html directly just like... 另一个可能是,如果您将图像从CSS中取出并直接将其加载到html中,就像...

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM