解决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 相关文章推荐
js脚本获取webform服务器控件的方法
May 16 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
Python实现队列的方法
2015/05/26 Python
python中__slots__用法实例
2015/06/04 Python
python实现rsa加密实例详解
2017/07/19 Python
浅谈Python NLP入门教程
2017/12/25 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
遗传算法python版
2018/03/19 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python configparser模块操作代码实例
2020/06/08 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
入党积极分子介绍信
2014/01/17 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
python标准库ElementTree处理xml
2022/05/20 Python