項目需求：圖片加載時，當(dāng)鼠標(biāo)滾動至當(dāng)前圖片進(jìn)行加載并加上上滑特效，實現(xiàn)這個效果需要對文檔文檔滾動位置和圖片的當(dāng)前位置進(jìn)行比較。但是mounted 鉤子函數(shù)執(zhí)行時img圖片并未加載出來也就是占位為空，導(dǎo)致圖片位置計算出問題。

解決這個問題，目前想到幾種種方法

一、對mounted 鉤子函數(shù) 中init方法加上延時

mounted: function() { this.$nextTick(() => { // 加上延時避免 mounted 方法比頁面加載早執(zhí)行 或者 對img進(jìn)行塊級化設(shè)置寬高進(jìn)行 提前站位 setTimeout(() => { this.init() }, 100) }) }, init () { var h = $(window).height() var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop var moves = $(’.tp’).filter(() => { return !$(this).hasClass(’move’); }); moves.each((index, item) => { var itemTop, isShow; itemTop = $(item).offset().top; isShow = (itemTop - scrollTop) < h ? true : false; console.log(`${index}: ${itemTop} ${scrollTop} ${h}`) if(isShow) { $(item).addClass(’move’); } }) },

二、img標(biāo)簽進(jìn)行塊級化并設(shè)置寬高進(jìn)行占位

三、不使用img標(biāo)簽，使用div，并設(shè)置background-image

補(bǔ)充知識：vue 解決mounted不重加載子組件問題

有時需要在父組件中重復(fù)加載同一個子組件，但會出現(xiàn)子組件不重新加載的問題。

解決方法：在子組件外加一個div框住它：

這樣，父組件的數(shù)據(jù)就可以在每次加載子組件的時候傳入到子組件中

以上這篇解決VUE mounted 鉤子函數(shù)執(zhí)行時 img 未加載導(dǎo)致頁面布局的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。