解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁面布局的問題
項(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圖片并未加載出來也就是占位為空，導(dǎo)致圖片位置計(jì)算出問題。
解決這個(gè)問題，目前想到幾種種方法
一、對(duì)mounted 鉤子函數(shù) 中init方法加上延時(shí)
mounted: function() {
this.$nextTick(() => {
// 加上延時(shí)避免 mounted 方法比頁面加載早執(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不重加載子組件問題
有時(shí)需要在父組件中重復(fù)加載同一個(gè)子組件，但會(huì)出現(xiàn)子組件不重新加載的問題。
解決方法：在子組件外加一個(gè)div框住它：
這樣，父組件的數(shù)據(jù)就可以在每次加載子組件的時(shí)候傳入到子組件中
以上這篇解決VUE mounted 鉤子函數(shù)執(zhí)行時(shí) img 未加載導(dǎo)致頁面布局的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01
這篇文章主要介紹了Vue解決移動(dòng)端彈窗滾動(dòng)穿透問題的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue中導(dǎo)入excel文件的兩種方式,大概有兩種導(dǎo)入文件的方法：form表單和el-upload，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
從vue基礎(chǔ)開始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例代碼(推薦)
這篇文章主要介紹了從vue基礎(chǔ)開始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例代碼，需要的朋友參考下2018-02-02
Vue+Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制
近來發(fā)現(xiàn)Echarts?API越發(fā)的強(qiáng)大，對(duì)于繪制各類圖形可以使用Echarts實(shí)現(xiàn)。本文將利用Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制，希望對(duì)大家有所幫助2023-03-03
使用Vue3和Axios進(jìn)行API數(shù)據(jù)交互的代碼實(shí)現(xiàn)
在現(xiàn)代Web開發(fā)中,前端框架和庫的使用越來越普遍,Vue.js便是其中一個(gè)受歡迎的選擇,Axios作為一個(gè)基于Promise的HTTP客戶端,能夠幫助我們輕松地與API進(jìn)行交互,在這篇博客中,我將介紹如何利用Vue 3及Axios進(jìn)行API數(shù)據(jù)交互,需要的朋友可以參考下2024-09-09
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了詳解nuxt路由鑒權(quán)(express模板)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue仿element實(shí)現(xiàn)分頁器效果，實(shí)現(xiàn)思路是定一個(gè)值foldPage, 意為當(dāng)前最多顯示的標(biāo)簽數(shù),當(dāng)總頁數(shù)超過即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2)，具體實(shí)例代碼大家參考下本文2018-09-09
Vuex模塊化和命名空間namespaced實(shí)例演示
這篇文章主要介紹了Vuex模塊化和命名空間namespaced的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11