項目需求：圖片加載時，當鼠標滾動至當前圖片進行加載并加上上滑特效，實現這個效果需要對文檔文檔滾動位置和圖片的當前位置進行比較。但是mounted 鉤子函數執行時img圖片并未加載出來也就是占位為空，導致圖片位置計算出問題。

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

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

mounted: function() {

this.$nextTick(() => {

// 加上延時避免 mounted 方法比頁面加載早執行 或者 對img進行塊級化設置寬高進行 提前站位

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標簽進行塊級化并設置寬高進行占位

三、不使用img標簽，使用div，并設置background-image

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

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

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

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

以上這篇解決VUE mounted 鉤子函數執行時 img 未加載導致頁面布局的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。

時間： 2020-07-24

總結

以上是生活随笔為你收集整理的vue进入页面执行的钩子函数_解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。