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

来源：10-6 布流：区分图片预加载，获取元素关键属性

demonCry

2022-06-09

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

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

写回答

1回答

Sunday

2022-06-09

你好

不是的。

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

Cloud_Iris

所以结合10-10来看，在 list/item.vue 组件指定了高度（后端传来数据）以后，是否采用预加载个人感觉就没有区别了。整体流程梳理为： * 我们在 list/item.vue 组件里指定了图片的高度为： height: (width / itemData.photoWidth) * itemData.photoHeight, * 这里的width是 m-waterfall 组件计算出的列宽：columnWidth * 由 m-waterfall 组件传出给 list/index.vue，再传给 list/item.vue * 而列宽 columnWidth 在 onMounted 阶段就会由 computeColumnWidth() 算出 * 所以在 onMounted 阶段就会将数据传到 list/item.vue，图片的尺寸在这一阶段就已经算好了 * @NOTE 所以实际上讲……是否采用预加载，在后端给了图片尺寸的情况下没有意义

2022-10-06

共5条回复

基于 Vue3 ，打造前台+中台通用开发提效解决方案

42 种前台常见业务模型， 15 种中台通用组件，成为前端提效高手

788 学习 · 517 问题

查看课程

相似问题

还是不明白图片预加载

回答 1

关于图片预加载

回答 1

预加载是啥意思啊老师

回答 1

如果图片加载失败，会一直触发加载

回答 1

无需图片预加载时，为啥不需要把columnWidth置空？

回答 1

打开慕课网App查看更多内容