响应式设计流体图像的想法

Question

我想创建一个页面，适当的图像加载是由JavaScript，基于浏览器大小确定。例如：

<img src="image1.jpg" /> 

的JavaScript将其更改为：

<img src="image1_800px.jpg" /> 

并加载800像素宽的图像的版本。

这样做并不是问题。问题出现时，我尝试做同样的浏览器没有JavaScript。基本的想法是最初隐藏图像并在NOSCRIPT标签中以样式显示它们。因此，支持javascript的浏览器将更改图像URL并使这些图像可见，并且不支持JavaScript的浏览器将简单地通过CSS取消隐藏这些图像。问题在于带有display：none的图像是由浏览器加载的。并且将图像url添加到除src属性之外的任何内容都不是一种选择，因为此类图像依赖于javascript来设置其src。

那么有没有什么想法，如果它有可能使这项工作？

例如：我可以重写domready上的图像src属性，并希望浏览器不能开始从旧的src加载图像，但情况会是这样吗？如果是这样 - 它会一直如此，或者一些浏览器的工作方式会有所不同吗？

Answer 1

我认为你要找的是http://adaptive-images.com/ - 它使用Javascript来确定图像大小，但如果用户没有启用Javascript，仍然提供重新调整大小的图像（有警告，阅读文档）。