專案需求：圖片載入時，當滑鼠滾動至當前圖片進行載入並加上上滑特效，實現這個效果需要對文件文件滾動位置和圖片的當前位置進行比較。但是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 未載入導致頁面佈局的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。