dom加载完再执行 vue_vue中等页面dom加载完毕后执行某方法？

最近在玩一个类似拼图的东东，业务场景就是在主图加载到页面的时候，计算主图相对页面容器的缩小放大系数，通过这个系数计算子图的左边及宽度

问题：在mounted中调用计算主图的原始宽高时，提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素)，因此导致所有的计算都返回0

在mounted中，使用一个定时器就是好的，使用nextTick也是无效

mounted() {

this.screenX = document.body.offsetWidth;

this.getData();

// 有效

setTimeout(() => {

this.init()

}, 1000)

// 无效

this.$nextTick(() => {

this.init()

})

window.onresize = () => {

return (() => {

this.screenX = document.body.offsetWidth;

console.log('this.screenX', this.screenX);

this.init()

})()

}

},

不知道有没有更优雅的方法，能解决这个问题

// import Swiper from '@/components/common/swiper/swiper.vue'

// import { Swiper } from 'vux'

import myswiper from '@/components/common/myswiper/swiper.vue'

import imgData from '@/datas/detailImg.json'

import part1 from '@/datas/part_1.json'

import part2 from '@/datas/part_2.json'

import part3 from '@/datas/part_3.json'

import part4 from '@/datas/part_4.json'

export default {

name: "detail",

components: {

// Swiper,

myswiper

},

data() {

return {

flag: false, //控制部件选择是否出现

containerImg: '', //当前滑到的图片容器

// mainImgLeft: 0,

// mainImgTop: 0,

imgList: [], //图片list

curIndex: 0, //当前选中的那个一个list的索引

screenX: '', //浏览器屏幕的可视区域宽度，计算没张图片的tranform

partList: [], //部件的list

flagMask: false, //点击图片，查看大图效果的标识

warpTop: 0 //计算大图的top值

};

},

mounted() {

this.screenX = document.body.offsetWidth;

this.getData();

// 有效

// setTimeout(() => {

this.init()

// }, 500)

// // 无效

// this.$nextTick(() => {

// this.init()

// })

window.onresize = () => {

return (() => {

this.screenX = document.body.offsetWidth;

console.log('this.screenX', this.screenX);

this.init()

})()

}

},

methods: {

// 获取图形数据

getData() {

this.imgList = imgData;

},

// 获取局部列表

getPartData(id) {

this.flag = true;

switch (id) {

case "0":

this.partList = part1;

break;

case "1":

this.partList = part2;

break;

case "2":

this.partList = part3;

break;

case "3":

this.partList = part4;

break;

}

},

init() {

// 进来时通过索引找到当前的轮播项，判断是否已经加载过，如果已经加载过，则不加载，如果没有加载过，则设置为加载过，加载

const curItem = this.imgList[this.curIndex];

// if (curItem.loaded) {

// return

// } else {

// curItem.loaded = true;

this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];

// 获取大图元素的真实宽高

this.bodyImg = this.getRealWH(this.containerImg);

// 计算width的缩放比例 375

this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;

// this.xRatio = this.bodyImg.x / 375;

// 计算height的缩放比例 211

this.yRatio = this.bodyImg.y / this.containerImg.offsetHeight;

// this.yRatio = this.bodyImg.y / 211;

// this.resetStyle('part_A', 'part_A');

// this.resetStyle('part_B', 'part_B');

var tempArr = curItem.mainPart || [];

for (var i = 0; i < tempArr.length; i++) {

this.resetStyle('main_' + tempArr[i].pid, 'main_' + tempArr[i].pid);

}

// }

},

/**

* 获取img的真实宽高

* @Author shunzizhan

* @Email shunzizhan@163.com

* @DateTime 2017-10-24T10:42:03+0800

* @param {[type]} myimage [description]

* @return {[type]} [description]

*/

getRealWH(myimage) {

var rw, rh;

if (typeof myimage.naturalWidth == "undefined") {　　 // IE 6/7/8

var i = new Image();

i.src = myimage.src;

rw = i.width;

rh = i.height;

} else {　　 // HTML5 browsers

rw = myimage.naturalWidth;

rh = myimage.naturalHeight;

}

return { x: rw, y: rh }

},

/**

* 重新设置元素的样式

* @Author shunzizhan

* @Email shunzizhan@163.com

* @DateTime 2017-10-24T10:39:46+0800

* @param {[type]} ele [当前点击的元素]

* @param {[type]} eleTag [目标元素]

* @param {[type]} xRatio [宽度缩放比例]

* @param {[type]} yRatio [高度缩放比例]

* @return {[type]} [description]

*/

resetStyle(ele, eleTag) {

if (event) {

event.stopPropagation(); //阻止冒泡

}

var xRatio = this.xRatio;

var yRatio = this.yRatio;

var _dom = document.getElementById(ele);

var partAImg = this.getRealWH(_dom);

// 没个部位，坐标，尺寸均一致

var x = _dom.getAttribute('data-x');

var y = _dom.getAttribute('data-y');

// var tempX = this.mainImgLeft / xRatio;

var tempX = x / xRatio;

var tempW = partAImg.x / xRatio;

// var tempY = this.mainImgTop / yRatio;

var tempY = y / yRatio;

var tempH = partAImg.y / yRatio;

var _tagDom = document.getElementById(eleTag);

_tagDom.src = _dom.src;

_tagDom.style.left = tempX + 'px';

_tagDom.style.top = tempY + 'px';

_tagDom.style.width = tempW + 'px';

_tagDom.style.height = tempH + 'px';

},

// 子组件翻页时，更改索引，父级同步响应

changeImg(index) {

// console.log('计算属性-父组件', index)

this.curIndex = index;

this.init();

this.flag = false;

},

// 点击大图，查看放大图

resetTop() {

this.flagMask = !this.flagMask;

if (this.flagMask) {

this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;

} else {

this.warpTop = 0;

}

}

}

}