解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

项目需求：图片加载时，当鼠标滚动至当前图片进行加载并加上上滑特效，实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较。但是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 未加载导致页面布局的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue项目F5刷新mounted里的函数不执行问题

    项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟vue生命周期有关,图就不贴了,直接说原因. 当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立. 因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,

  • vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit  方法导致的 二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三   猜

  • vue 页面回退mounted函数不执行的解决方案

    前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新 经过一番面向百度研究,终于找到了问题所在.接下来就记录一下这个问题及其解决的方法. 原理 其实这个问题主要涉及到vue生命周期,对vue生命周期理解不够深刻的同学可以去官网学习一下:https://vuejs.org/v2/api/#Options-Lifecycle-Hooks 解决这个问题的关键就在于对keep-alive的理解和activated钩子函

  • 解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

    项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导致图片位置计算出问题. 解决这个问题,目前想到几种种方法 一.对mounted 钩子函数 中init方法加上延时 mounted: function() { this.$nextTick(() => { // 加上延时避免 mounted 方法比页面加载早执行 或者 对img进行块级化设置宽高进行

  • 解决Vue中mounted钩子函数获取节点高度出错问题

    遇到的问题 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上.问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题. 定位问题 后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是G

  • vue created钩子函数与mounted钩子函数的用法区别

    1:在使用vue框架的过程中,我们经常需要给一些数据做一些初始化处理,这时候我们常用的就是在created与mounted选项中作出处理. 首先来看下官方解释,官方解释说created是在实例创建完成后呗立即调用. 在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目前不可见. 这话的意思我觉得重点在于说挂架阶段还没开始,什么叫还没开始挂载,也就是说,模板还没有被渲染成html,也就是这

  • 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单

  • 深入理解Vue 的钩子函数

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程: 全局

  • 解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    问题: 从第一个页面跳转到第二个页面后,如果停留在第二个页面,定时器还在运行.如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况. 原因: 当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的. data () { return { ct: null } }, methods: { start() { this.ct= setTimeout( () => {that.countdow

  • 解决vue动态下拉菜单 有数据未反应的问题

    问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误 jsp 下拉菜单 <select name="plantModelParentId" v-model="vueObj.plantModelParentId" @change="selectChange"> <option value=""></option> <option v-fo

  • 基于vue和react的spa进行按需加载的实现方法

    基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • vue 使用mescroll.js框架实现下拉加载和上拉刷新功能

    以下是代码是在项目中抽取出来的,都是实现下拉刷新上拉加载的要点. 注:以下不是用vue-cli写的,用vue-cli的请绕过,抱歉~ 1.mescroll 的页面的初始化 initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回调函数 }, up:{ callback: _this.upCallback,

随机推荐