获取图片高度问题------页面图片加载完成后获取图片高

最新推荐文章于 2024-08-16 08:25:14 发布

kellywong

最新推荐文章于 2024-08-16 08:25:14 发布

阅读量2.6k

点赞数 1

分类专栏： web前端 js基础知识

本文链接：https://blog.csdn.net/kellywong/article/details/89556987

版权

在React应用中，由于图片加载延迟，使用`componentDidMount`时可能无法正确获取图片高度，导致埋点计算错误。文章讨论了这个问题的原因，即React的DOM加载不等待图片完成加载。提出三种解决方案：1) 预先计算图片在不同设备上的高度并在组件挂载时赋值；2) 使用定时器延迟获取高度，确保图片已加载；3) 使用占位图避免高度计算错误。提醒开发者注意图片加载对高度计算的影响。

摘要由CSDN通过智能技术生成

问题描述：
因为埋点的需要，需要判断一个产品是否进入用户可视区域，在实现过程中出现：
每次新打开一个窗口，使用element.getBoundingClientRect().top去获取一个产品的top值都是错的，但是刷新页面，值又正常了。

思考过程：
为什么会出现这种情况啊，很有可能是因为一个产品卡片中包含了图片导致的。。但是我明明是在componentDidMount中做的处理，该生命周期函数运行的时候不是页面dom都加载完了吗，那不应该获取不到图片高度啊？
是不是react中所谓的dom加载完成就类似于jquery的ready，只是dom的结构加载完毕，便视为加载完成，并不会考虑图片是否加载完成，如果图片没有加载完成，那结果就是获取图片高度为0，程序出错？那怎么解决这个问题？

解决方案：

人为计算图片在不同设备下的高度，并且在componentDidMount第一行就把这个高度赋给元素。这种方式需要知道图片的展示尺寸(width,height), 然后通过当前设备的宽度按照比例计算出在当前设备的高度，

	window.removeEventListener('resize', this.resizeFunction)
  	//计算在当前设备中图片的高度，PLAY_IMAGE_MARGIN_TOTAL图片margin, IMAGE_SIZE:图片尺寸
    setPlayImageHeight = async() => {
        const viewPortW = document.body.offsetWidth || document.documentElement.offsetWidth
        let p