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

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

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

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

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

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