Javascript 如何在它之前获得图像尺寸'；是使用jQuery加载的吗？ 目标：

我在一个高度为0的容器中有一组图像。单击触发器时，我希望容器向下滑动（动画）并延迟加载图像（使用延迟加载jQuery插件）

标记：

//等

问题：
为了给容器设置动画，我需要给它一个高度。目前，我使用jQuery快速获取容器的高度，将其存储在数据高度属性中，然后将高度设置为零。问题是，当实际加载的图像可能要高得多时，它会根据加载的gif的内部获取高度。因此，当满载容器为2000px时，数据高度属性可能为600px

我应该/可以：

在延迟加载之前，获取存储在data src属性中的图像的高度，将它们相加，然后将容器设置为该高度

保持容器关闭，在每个图像中加载，一旦加载，我可以将它们添加到一起，计算容器高度，然后将其向下滑动（不理想，因为速度会非常慢）

还有其他建议吗

踢球者： 此网站将响应，因此完全加载的图像的高度将根据浏览器的宽度而变化，因为它们的最大宽度为：100%

在延迟加载之前，获取存储在data src属性中的图像的高度，将它们相加，然后将容器设置为该高度

---

是的，因为给定宽度不变。如果这样可以节省您的时间，您还可以研究诸如和之类的插件。

您可以将图像延迟加载到一个div中，该div的位置固定在用户浏览器窗口之外，然后在加载图像后，找到它的高度，并将要填充图像的div的高度设为零，替换该div的背景图像，然后将其设置为从屏幕外的div学习到的高度

好主意。抱歉，我应该提到有几个触发器和几个图像容器（这是一个公文包），所以如果容器未打开，加载图像并不实际。您的目标是将图像逐个加载到框中，并在运行时设置动画？就像你从“gif图像高度”*3开始，然后以“所有图像高度之和”结束？理想情况下，我想给容器“所有图像高度之和”，这样容器就不会在图像加载时跳跃，我认为这样看起来会很平滑，就是为容器加载一个gif，然后在加载所有三个图像后，执行一种1,2,3动画效果，将它们全部导入。否则，如果事先不知道图像的细节，你就不可能找到你想要的。但是高度会改变吗？如果图像为1000x1000，浏览器宽度为500，则图像高度也将为500

<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