解决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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
Js 随机数产生6位数字
May 13 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
javascript定时器完整实例
Feb 10 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript验证知识整理
Mar 24 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
PHP count()函数讲解
2019/02/03 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
sails框架的学习指南
2014/12/22 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
Javascript封装id、class与元素选择器方法示例
2017/03/13 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python 判断一个进程是否存在
2009/04/09 Python
Python切片操作深入详解
2018/07/27 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python3获取url文件大小示例代码
2019/09/18 Python
Python的pygame安装教程详解
2020/02/10 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
基于Python实现粒子滤波效果
2020/12/01 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
求职自荐信范文格式
2013/11/29 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python