處理像佈局/加載pinterest可變圖像大小

我想爲我的網站編譯pinterest樣式佈局。並已完成它，除了加載時間。我已經開始儘可能快地獲得我網站的負載。處理像佈局/加載pinterest可變圖像大小

爲此，我遇到了惰性加載腳本（如可在此處找到：http://www.appelsiini.net/projects/lazyload），它首先加載網站，然後加載圖像，從而加速網站加載時的可用性，類似於什麼pinterest ..

我一直有的問題是，雖然腳本的作品，因爲我們有一個圍繞每個圖像的風格和展示，並在圖像上未定義的大小，佈局出來都搞砸了每次。實質上，一旦圖像大小加載，圖像大小總是令人驚訝。

解決此問題的最佳方法是什麼？ pinterest做什麼？與他們類似，我們擁有所有形狀和大小的圖像，這些圖像將通過php和javascript動態添加到我們的網站上，因此，簡單地確定每張圖片的所有尺寸並不是我們可以做到的。

感謝您的幫助！

來源

2013-01-18 Brandon Willbanks

Pinterest最有可能測量了圖像並將圖像尺寸存儲在數據庫中。然後簡單地輸出img標籤內的高度，寬度不是動態的如由CSS其設定

首先在CSS的一組規則控制所述圖像的寬度（這不會改變）：

.pin .ImgLink img 
{ 
    max-width: 192px; 
    opacity: 1; 
} 

.PinImageImg 
{ 
    min-height:75px; 
    background-color:#f2f0f0 
}

，然後每個img標記的HTML標記控制的高度（這改變爲每個圖像）：

<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />

這種方式沒有佈局的爆裂作爲每個圖像由JavaScript加載。

來源

2013-01-18 21:46:47

處理像佈局/加載pinterest可變圖像大小

回答

相關問題