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

 更新时间:2020年07月27日 08:41:50   作者:一起蹦极某囖  
这篇文章主要介绍了解决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 未加载导致页面布局的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用Vuex解决Vue中的身份验证问题

    使用Vuex解决Vue中的身份验证问题

    这篇文章主要介绍了使用Vuex解决Vue中的身份验证问题,本文通过文字实例相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-09-09
  • Nuxt.js实战和配置详解

    Nuxt.js实战和配置详解

    这篇文章主要介绍了Nuxt.js实战和配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    这篇文章主要介绍了推荐VSCode 上特别好用的 Vue 插件之vetur,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 深入理解vue.js中$watch的oldvalue与newValue

    深入理解vue.js中$watch的oldvalue与newValue

    这篇文章主要给大家介绍了关于vue.js中$watch的oldvalue与newValue的相关资料,文中通过示例代码介绍的非常详细,并且介绍了关于watch的其他测试,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。
    2017-08-08
  • vue复合组件实现注册表单功能

    vue复合组件实现注册表单功能

    这篇文章主要为大家详细介绍了vue复合组件实现注册表单功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • Vuejs实现带样式的单文件组件新方法

    Vuejs实现带样式的单文件组件新方法

    这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 解决vue单页面应用中动态修改title问题

    解决vue单页面应用中动态修改title问题

    这篇文章主要介绍了解决vue单页面应用中动态修改title问题,本文通过示例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 详解vue-cli本地环境API代理设置和解决跨域

    详解vue-cli本地环境API代理设置和解决跨域

    这篇文章主要介绍了详解vue-cli本地环境API代理设置和解决跨域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • webpack+vue+express(hot)热启动调试简单配置方法

    webpack+vue+express(hot)热启动调试简单配置方法

    今天小编就为大家分享一篇webpack+vue + express (hot) 热启动调试简单配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue离开当前页面触发的函数代码

    vue离开当前页面触发的函数代码

    这篇文章主要介绍了vue离开当前页面触发的函数代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论