目标:
我在一个高度为 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。
我应该/可以吗:
- 在延迟加载之前获取存储在 data-src 属性中的图像的高度,将它们相加,然后将容器设置为该高度。
- 保持容器关闭,加载每个图像,加载后我可以将它们加在一起,计算容器高度,然后将其向下滑动(不理想,因为它会非常慢)。
- 还有其他建议吗?
踢球者:
此网站将具有响应能力,因此完全加载的图像的高度将根据浏览器宽度而变化,因为它们的最大宽度为:100%;
最佳答案
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 .
关于javascript - 如何使用 jQuery 在延迟加载之前获取图像尺寸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17757891/