Question

目标：

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

标记：

<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。

应该/我可以：

在延迟加载之前获取存储在data-src属性中的图像的高度，将它们加在一起，然后将容器设置为该高度。
保持容器关闭，加载每张图片，加载后我可以将它们加在一起，计算容器高度，然后向下滑动（不理想，因为它会非常慢）。
还有其他建议吗？

踢球者：

此网站具有响应性，因此满载图片的高度会因浏览器宽度而异，因为它们的最大宽度为100％;

Answer 1

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

是的，因为宽度不会改变。如果它节省您的时间，您还可以调查imagesloaded和lazyload等插件。

Answer 2

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

如何在使用jQuery延迟加载之前获取图像尺寸？

目标：

标记：

问题：

踢球者：

2 个答案: