問題描述：
因爲埋點的需要，需要判斷一個產品是否進入用戶可視區域，在實現過程中出現：
每次新打開一個窗口，使用element.getBoundingClientRect().top的值都是錯的，但是刷新頁面，值又正常了。
思考過程：
爲什麼會出現這種情況啊，明明是在componentDidMount中做的處理，該生命週期函數運行的時候不是頁面dom都加載完了嗎，那不應該獲取不到圖片高度啊？
是不是react中所謂的dom加載完成就類似於jquery的ready，只是dom的結構加載完畢，便視爲加載完成，並不會考慮圖片是否加載完成，結果是獲取高度爲0，程序出錯？
爲此在頁面剛加載完成和滾動時候分別獲取圖片高度，前者是0，後者是正常值，這說明思考的第二條是正確的，那怎麼解決這個問題？
解決方案：
- 人爲計算圖片在不同設備下的高度，並且在componentDidMount第一行就把這個高度賦給元素。這種方式需要知道圖片的展示尺寸, 然後通過當前設備的寬度按照比例計算出在當前設備的高度，
window.removeEventListener('resize', this.resizeFunction)
//計算在當前設備中圖片的高度，PLAY_IMAGE_MARGIN_TOTAL圖片margin, IMAGE_SIZE:圖片尺寸
setPlayImageHeight = async() => {
const { UPDATE_STATE } = this.store.actions
const viewPortW = document.body.offsetWidth || document.documentElement.offsetWidth
let playImageHeight = (viewPortW - PLAY_IMAGE_MARGIN_TOTAL) * (IMAGE_SIZE.height / IMAGE_SIZE.width)
UPDATE_STATE({playImageHeight})
- 設置定時器延遲獲取圖片高度
既然圖片未加載完成之前獲取不到高度那就延遲獲取這個高度啦。。
總結：之後凡是遇到含有圖片加載的，然後又需要計算高度的，都要注意圖片未加載完成所帶來的影響。