解決VUE mounted 鉤子函數執(zhí)行時 img 未加載導致頁面布局的問題
更新時間：2020年07月27日 08:41:50 作者：一起蹦極某囖
這篇文章主要介紹了解決VUE mounted 鉤子函數執(zhí)行時 img 未加載導致頁面布局的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
項目需求：圖片加載時，當鼠標滾動至當前圖片進行加載并加上上滑特效，實現這個效果需要對文檔文檔滾動位置和圖片的當前位置進行比較。但是mounted 鉤子函數執(zhí)行時img圖片并未加載出來也就是占位為空，導致圖片位置計算出問題。
解決這個問題，目前想到幾種種方法
一、對mounted 鉤子函數 中init方法加上延時
mounted: function() {
this.$nextTick(() => {
// 加上延時避免 mounted 方法比頁面加載早執(zhí)行 或者 對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 鉤子函數執(zhí)行時 img 未加載導致頁面布局的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue.js 是一個漸進式的JavaScript框架,廣泛用于構建交互式用戶界面,在 Vue 中,雙向綁定是一項非常核心的概念,尤其是在處理表單輸入時,它使得數據和用戶界面之間的互動變得簡單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實現表單輸入的雙向綁定2025-01-01
這篇文章主要介紹了vue 如何處理防止按鈕重復點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue點擊當前路由高亮小案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
本文主要介紹了vue中使用 pinia 全局狀態(tài)管理的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
本文給大家介紹了使用vuex的state狀態(tài)對象的5種方式，給大家貼出了我的vuex的結構，感興趣的朋友跟隨腳本之家小編一起學習吧2018-04-04
這篇文章主要介紹了vue3的父傳子問題(單項數據流)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue.js數據加載完成前顯示原代碼{{代碼}}問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本文通過實例代碼給大家介紹了Vue實現搜索 和新聞列表功能簡單范例，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了Vue.js slot插槽的作用域插槽用法詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09