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


Posted in Javascript onJuly 27, 2020

项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较。但是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 未加载导致页面布局的问题

这样,父组件的数据就可以在每次加载子组件的时候传入到子组件中

以上这篇解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 #Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 #Javascript
Element Steps步骤条的使用方法
Jul 26 #Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 #Javascript
You might like
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
twig里使用js变量的方法
2016/02/05 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
javascript实现网站加入收藏功能
2015/12/16 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
JS实现可视化文件上传
2018/09/08 Javascript
深入了解js原型模式
2019/05/30 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
python线程池的实现实例
2013/11/18 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python tkinter实现连连看游戏
2020/11/16 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
师范生求职自荐信
2014/06/14 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android