解决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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
vue-axios使用详解
May 10 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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 adodb连接mssql解决乱码问题
2009/06/12 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
详谈Node.js之操作文件系统
2017/08/29 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
小试小程序云开发(小结)
2019/06/06 Javascript
javascript如何实现create方法
2019/11/04 Javascript
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python如何对齐字符串
2020/07/30 Python
Python函数递归调用实现原理实例解析
2020/08/11 Python
python爬虫基础之urllib的使用
2020/12/31 Python
NULL是什么,它是怎么定义的
2015/05/09 面试题
探亲邀请信范文
2014/01/30 职场文书
业绩考核岗位职责
2014/02/01 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
承诺函范文
2015/01/21 职场文书
反邪教教育心得体会
2016/01/15 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js