解决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点击弹出下拉菜单效果实例
Aug 12 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
java必学必会之static关键字
Dec 03 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
自定义PC微信扫码登录样式写法
Dec 12 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
el-select数据过多懒加载的解决(loadmore)
May 29 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 UTF8中文字符截断函数代码
2012/09/11 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php实现可运算的验证码
2015/11/10 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
Django Rest framework之认证的实现代码
2018/12/17 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
DIY手工制作经营店创业计划书
2014/02/01 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
责任书范本大全
2015/05/11 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书