1

目标：

我在一个高度为 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 获取高度。因此，当完全加载的容器为 2000 像素时，数据高度属性可能为 600 像素。

我应该/我可以：

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

踢球者：

该站点将响应，因此完全加载的图像的高度将根据浏览器宽度而变化，因为它们具有最大宽度：100%；

4

2 回答 2

0

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

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

于 2013-07-20T01:57:35.420 回答
0

您可以将图像延迟加载到远离用户浏览器窗口的位置固定的 div 中，然后在图像加载后，找到它的高度并给要填充图像高度为零的 div，替换背景图像那个 div，然后把它动画到你从 div 屏幕外学到的高度

于 2013-07-20T01:58:15.243 回答