Foresight.js:一个灵活支持高清晰图片的包

fmms 12年前

以前我们用很多的时间,来解决网络问题,到头来还是很丑。

图像的复杂问题没有很好的解决方案。一个站点,以正确的屏幕和高清晰度图像展示给高分辨率和低分辨率的设备。这当然没那么简单,带宽,屏幕大小,方向等因素都很复杂。

现在最好的解决方案是以低分辨率的图像传到每个设备。虽然图片在高分辨率屏幕显示器里面看起来会很丑,但起码会节约大家的时间成本。虽然这是目前最好的解决方案,但开发商们再不断推出新的标准,来服务这看似简单的事情。

目前我们看到最聪明的做法是亚当布拉德利(Adam Bradley)的Foresight.js,foresight.js使得在特定设备上展示高清晰图片变得简单,像新iPad。但它不单单做这些,它不 但检查高分辨率屏幕,还检查当前设备是否有较快的网络来形成高清晰的图像。只有这2个条件(高分辨率屏幕和较快网络)兼备的情况下,才会形成高清晰的图 像。

Foresight.js:一个灵活支持高清晰图片的包

Foresight.js让人着迷的部分原因是使用了image-set()函数。用法:

myselector {
background: image-set(url(foo-lowres.png) 1x, url(foo-highres.png) 2x) center;
}

Foresight.js使用了非常灵活的机制来适应不同的浏览器:font-family属性。也看起来很疯狂,但仍然是合理的CSS因为
font-family允许任意字符串(来处理字体名字),这意味着浏览器可以这样:

myselector {
font-family: ‘ image-set( url(/images/foo.png), url(/images/foo_2x.png) 2x high-bandwidth ) ‘;
}

这犹如一种黑客行为,但这是我们所喜欢看到的:聪明和实用。因为浏览器成功解析font-family规则,value值会添加到DOM,javascript可以通过它,这正是foresight.js所做的。
本文转载自: http://www.daidata.com/archives/1046