解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁(yè)面布局的問(wèn)題
項(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3實(shí)現(xiàn)表單輸入的雙向綁定的示例代碼
Vue.js 是一個(gè)漸進(jìn)式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項(xiàng)非常核心的概念,尤其是在處理表單輸入時(shí),它使得數(shù)據(jù)和用戶界面之間的互動(dòng)變得簡(jiǎn)單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實(shí)現(xiàn)表單輸入的雙向綁定2025-01-01
vue 如何處理防止按鈕重復(fù)點(diǎn)擊問(wèn)題
這篇文章主要介紹了vue 如何處理防止按鈕重復(fù)點(diǎn)擊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue子組件監(jiān)聽(tīng)父組件值的變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue點(diǎn)擊當(dāng)前路由高亮小案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
使用vuex的state狀態(tài)對(duì)象的5種方式
本文給大家介紹了使用vuex的state狀態(tài)對(duì)象的5種方式，給大家貼出了我的vuex的結(jié)構(gòu)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
vue3的父?jìng)髯訂?wèn)題(單項(xiàng)數(shù)據(jù)流)
這篇文章主要介紹了vue3的父?jìng)髯訂?wèn)題(單項(xiàng)數(shù)據(jù)流)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問(wèn)題及解決
這篇文章主要介紹了vue.js數(shù)據(jù)加載完成前顯示原代碼{{代碼}}問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue實(shí)現(xiàn)搜索 和新聞列表功能簡(jiǎn)單范例
本文通過(guò)實(shí)例代碼給大家介紹了Vue實(shí)現(xiàn)搜索 和新聞列表功能簡(jiǎn)單范例，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09