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

解決這個(gè)問(wèn)題，目前想到幾種種方法

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

mounted: function() {

this.$nextTick(() => {

// 加上延時(shí)避免 mounted 方法比頁(yè)面加載早執(zhí)行 或者 對(duì)img進(jìn)行塊級(jí)化設(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)行塊級(jí)化并設(shè)置寬高進(jìn)行占位

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

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

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

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

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

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

時(shí)間： 2020-07-24

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。