多個圖像大小vs瀏覽器圖像大小調整/縮放

Question

我有一個頁面，我將加載幾個不同大小的主圖像;雖然不是所有的大圖像都會一次加載。

的情況是這樣的..

我有一個包含所有較大的圖像拇指滑塊;這些全部在頁面加載時加載。

默認的大圖像加載網頁時確實，但其他大的圖片，僅當用戶點擊縮略圖該圖像，然後我更換大的圖像作爲這樣的src加載..

function changeMainImage(image) { 

    // Set big image 
    var big_image = image + '-big.png' 

    // Update main image url 
    jQuery('#main_image').attr('src', big_image); 

} 

現在，因爲大圖像在頁面沒有加載時會導致大圖像出現小的延遲，這是不希望出現的。

現在我想我可以用一塊石頭殺死兩隻鳥，只需加載大圖像，沒有大拇指，只需讓瀏覽器將大圖像縮放爲縮略圖;我只是有點畏縮這樣做，因爲我一直恨網站使用這種方法的拇指，但在我看來，這似乎是有效的，因爲我需要加載大圖像。

這將使我可以減少1 * amount of pics的http請求數量，並且讓我在點擊拇指後立即加載大圖像。

我唯一擔心的是試圖找出如何給瀏覽器正確的尺寸，以便圖像縮放到正確的比例以及事實上，如果頁面有12個圖像;通過這種方式，我可以讓用戶一次下載所有12張大圖片，甚至不會對所有人都感興趣。

兩個版本都有優點&缺點 - 任何建議這裏要做什麼？

Answer 1

您現在擁有的方法是我喜歡做的。加載可見的內容。

現在，爲了讓用戶體驗更好，許多網站使用了一些技巧。第一個是預加載下一個或兩個圖像。如果您有幻燈片般的顯示，並且能夠很好地瞭解圖像顯示的順序，那麼這很好。

第二種是在大版本下載時顯示縮略圖。如果您的縮略圖尺寸合適，這可以讓用戶獲得點擊效果的視覺反饋，並且體面的連接後，圖片將很快下載。

最後，我建議使用漸進式JPEG（如果圖像是照片），以便在加載時進行增強。

對於您的尺寸數據（以及任何其他元數據），請將其保存在JavaScript數組對象或您存儲圖像數據的任何位置。您可以輕鬆使用JSON從服務器傳輸。