如何在使用jQuery延遲加載之前獲取圖像尺寸？

Question

目標：

我在高度為0的容器中有一組圖像。單擊觸發器時，我希望容器向下滑動（動畫）並延遲加載圖像（使用延遲加載jQuery插件）。

標記：

<a href="#">Trigger 1</a>

<div class="container-1">
    <img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
    <img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
    <img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
</div>

<a href="#">Trigger 2</a>

<div class="container-2">
    <img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
    <img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
    <img data-src="http://actualimageurl.jpg" src="http://loadinggif.gif">
</div>

// ETC

問題：

為了給容器設置動畫，我需要給它一個高度。 目前，我快速使用jQuery來獲取容器的高度，將其存儲在data-height屬性中，然后將高度設置為零。 問題是，當實際要加載的圖像可能更高時，它是根據加載gif的內部獲取高度的。 因此，當完全加載的容器為2000px時，data-height屬性可能為600px。

我應該/可以：

1. 延遲加載之前，獲取存儲在data-src屬性中的圖像的高度，將它們加在一起，然后將容器設置為該高度。
2. 保持容器密閉，加載每個圖像，一旦加載它們，我就可以將它們加在一起，計算容器的高度，然后向下滑動（不理想，因為它會很慢）。
3. 還有其他建議嗎？

踢球者：

該站點將做出響應，因此完全加載的圖像的高度將根據瀏覽器的寬度而變化，因為它們的最大寬度為：100％；

Answer 1

延遲加載之前，獲取存儲在data-src屬性中的圖像的高度，將它們加在一起，然后將容器設置為該高度。

是的，因為假定寬度不變。 如果您節省時間，還可以研究諸如imagesloaded和lazyload之類的插件。

Answer 2

您可以將圖片延遲加載到距離用戶瀏覽器窗口固定位置的div中，然后在加載圖片后找到其高度，然后將要填充的div的高度設置為零，替換背景圖片該div的動畫，然后將其動畫化為從div屏外學到的高度