关于图片预加载

Question

图片预加载的意思不是在没有显示图片的情况下 预先使用加载好图片吗？
但这里预加载的代码 让我有点不太明白 ：获取到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()
})

Answer 1

提问者 一只小木马 2022-09-09 01:40:05

哦 我明白了 是不是因为img资源的加载是异步的且不会阻塞DOM渲染 得到的高度有可能是img没有加载完的高度 这个方法的目的应该只是为了能确保得到的高度是包含了img的高度 而不是为了传统预加载那样提升用户体验吧？

• Sunday #1

  是的。之所以要先预加载所有的图片，目的还是为了拿到图片的高度。