響應式設計流體圖像的想法

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，仍然提供重新調整大小的圖像（有警告，閱讀文檔）。