不需要图片预加载的情况不应该是从接口数据中获取的高度吗？

Question

这一节中 不需要图片预加载时 是这样获取的高度

const useItemHeight = () => {
  itemHeights = [];
  // 拿到所有元素
  let itemElements = [...document.getElementsByClassName('m-waterfall-item')];
  itemElements.forEach(el => {
    itemHeights.push(el.offsetHeight);
  });
  // 渲染位置
  useItemLocation();
};

但难道不是应该从接口中后台返回的高度数据中获取吗？ 像下面这样

const useItemHeight = () => {
  itemHeights = [];
  data.forEach(item => {
    item.push(item.photoHeight);
  });
  // 渲染位置
  useItemLocation();
};

---

6.10
如果按照这一节的写法中 我们disable cache 然后Network 切换为slow 3g后 会出现如下bug

---

6-11

我改完往后看的时候发现 10-10讲了这问题 QAQ

Answer 1

Sunday 2022-06-09 14:32:26

你好

不是的。

不需要图片预加载意味着图片拥有初始高度（不需要等待图片加载过程），而不是数据包含了 item 高度。因为 图片 高度并不等于 item 的高度。

• 提问者 demonCry #1

  那这里 切换为picturePreReading="false"  这个时候直接获取el.offsetHeight为什么没有出现问题呢, 没想明白 ... 比如图片还没有加载完 这里el.offsetHeight 不就获取到的是不完整的高度吗...
  
  但我切换了下网速 打印itemHeights 貌似总是返回的是正确的值... 迷糊了 不知道是哪里知识点欠缺了

• 提问者 demonCry #2

  难道是 nextTick执行的时候 图片一定已经加载完了？

• 提问者 demonCry #3

  disable cache 后发现 的确有bug！

点开查看后面2条评论