javascript - 如何使用 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

Get the height of the image stored in the data-src attribute before it is lazy loaded in, add those together, then set the container to that height.

是的，因为假定宽度不变。如果可以节省您的时间，您还可以研究类似 imagesloaded 的插件和 lazyload .