根據窗口大小發送正確尺寸的圖像

Question

我正在開發一個圖片托管網站，主要是為了學習繩索，並且我正在使用php和mysql以及html，css和javascript。

照原樣，它在圖像頁面上加載完整尺寸的圖像，並將其擠壓到布局的一個框中。 我知道那不是正確的選擇。 我應該發送已經正確大小的圖像。 但這是麻煩所在：調整圖像大小以適合其中的框是基於瀏覽器窗口的大小的。 因此，如果頁面較大，則圖像較大；如果頁面較小，則圖像較小。

我想到的一種解決方案是將圖像存儲為幾種不同的大小，然后在頁面上使用javascript確定窗口大小，然后確定框的大小，然后使用該信息選擇要加載的正確圖像。 但是所有這些內聯javascript似乎也會使速度變慢。

最好的解決方案是什么？ 如果我的唯一目標是速度怎么辦？ 如果我的存儲空間有限，該怎么辦？ 如果我的計算能力有限怎么辦？

我正在嘗試了解這些東西； 不只是實施它。 分析各種選項的優柔寡斷的答案將是不錯的選擇。

Answer 1

您應該能夠在JavaScript加載之前就檢測到JavaScript中的窗口大小，因此在評估窗口大小並隨后加載適當的圖像（無論如何會是第二次請求）時，這實際上不會對性能造成任何影響。 您應該只檢查窗口大小，創建一個單個的PHP腳本即可獲取所需的圖像大小，然后在通過將參數附加到img src屬性來加載文檔之后，使用該腳本來提取適當的圖像。 實際上，無論您如何按照這些原則進行操作，性能影響都將是微不足道的，因為默認情況下圖像是不同的請求，這將成為您的瓶頸。

如果空間有限且圖像很多，則可以使用PHP為每個請求動態創建圖像（調整緩存后）。 如果您的計算能力有限，那么您可能希望緩存更多，或者如果可能性很小，則可以預先制作圖像。 或者，您可能具有某些“里程碑”類型的圖像，因為通常必須在多次通過中進行具有較大方差的圖像重采樣，因此每個里程碑都可以允許更少的通過次數來采樣到所需的准確大小。

如果從理論上講傳輸速度是一個主要問題，您也可以使用圖像切片。 由於大多數客戶端都允許與同一主機建立2個以上的連續連接，因此如果圖像足夠大（可以保證請求啟動的成本），則可以拆分圖像（然后抵消頁面的顯示），然后在頁面上顯示合並的部分（有點像多路復用） 。

Answer 2

好的，所以您要攻擊的是速度。 學習“完美”的方法也是有待改進的。

“完美”的解決方案將是使用如上所述的具有不同比例的各種圖像，或者使用不會隨比例丟失質量的基於矢量的圖像。

這更多地涉及到應用程序體系結構。

您首先要學習的是一些基本的javascript事件處理程序。

了解如何動態調整DOM元素的大小的基礎知識。

如果要動態調整圖像的高度和寬度大小，則應研究.bind('resize')事件。

Answer 3

我會嘗試的：

• 加載小圖像作為占位符
• 使用javascript檢測窗口大小
• 進行ajax調用以加載較大的版本
• 將屏幕尺寸保存到Cookie或會話變量中
• 根據該變量調用以下圖像
• 檢測調整大小事件並更新該變量

在服務器上，上載時准備幾個大小。

Answer 4

當您說大小時 ，您是指像素還是千字節？

如果以像素為單位，則將圖像放在一個框中，然后使用css調整圖像大小。 將img標簽的css屬性設置為流暢。 使用基於百分比的樣式。

例

.img_elem{ width: 100%; }

在html中

<Div class"what-ever-ur-container-is">
     <Img class"img_elem" src"../path/to/file.jpg" />
</div>