最近在做一移动端页面时,因为图片设置的百分比,而我需要把一个按钮加在图片上面,因此想了个办法,用js去去获取图片的高度去设置按钮的高度;
于是想着把他们写在
$(document).ready(function(){
var y_top=$(".yao-zhong3-info").offset().top; //div距离窗口顶部的高度
var h_top=$(".yao-zhong3-info img").height(); //div的高度
var h_width=$(".yao-zhong3-info").width();
})
/$(function(){ 代码})里面,等页面加载完后在执行;
但是在运用时,发生一个很奇怪的事情,md,图片的高度有时候能够得到,有时候为0,这都让我看不懂了;
后来在网上查了些资料,发现与dom加载顺序有关:
DOM加载顺序
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- 构造HTML DOM模型。
- 加载图片等外部文件。
- 页面加载完毕。
$(function(){ })是让dom加载完后执行,也就是说执行到第四步就不执行了,图片根本就还没加载出来;
后面发现了$(window).load(function(){代码})这个方法,页面加载完后在执行,哈哈,这下就科学了