关于图片预加载

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

一只小木马

2022-09-09

图片预加载的意思不是在没有显示图片的情况下预先使用加载好图片吗？
但这里预加载的代码让我有点不太明白：获取到img的src是从DOM中拿到的而非是从data里面获取img的src 此时既然能从DOM拿到src不已经说明DOM已经渲染好了吗可以拿到height的数据那么为啥还需要写一段代码加载img的代码呢？

// 为何要从渲染好的itemElements中获取src 而不是从data中获取
const imgElements = getAllImgElements(itemElements);
const imgSrc = getAllImgSrc(imgElements);
// 此时也能获得el.offsetHeight的数据
itemElements.forEach(el=>{
     console.log('height',el.offsetHeight)
})     
// wait until img loaded
//  不太明白这里的意义
loadAllImg(imgSrc).then((res)=>{
   itemElements.forEach(el=>{
       itemHeights.value.push(el.offsetHeight);
   })
  useItemLocation()
})

写回答

1回答