問題描述：
因爲埋點的需要，需要判斷一個產品是否進入用戶可視區域，在實現過程中出現：
每次新打開一個窗口，使用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 playImageHeight = (viewPortW - PLAY_IMAGE_MARGIN_TOTAL) * (IMAGE_SIZE.height / IMAGE_SIZE.width)
this.setState({playImageHeight})
- 設置定時器延遲獲取圖片高度
既然圖片未加載完成之前獲取不到高度那就延遲獲取這個高度，主要思路就是設置一個定時器並使用一個flag標誌是否可視區域內的圖片均加載完成，如果圖片尚未加載完成就繼續循環判斷，如果已經加載完成就可以獲取高度了 - 使用佔位圖
總結：之後凡是遇到含有圖片加載的，然後又需要計算高度的，都要注意圖片未加載完成所帶來的影響。