jquery offset positon 获取位置不准的解决方法

Posted 2020-10-11 rysinal

 

问题：

本地开发时，由于使用了图片，而且使用了offset().top涉及到图片所在的div距离计算的部分，本地开发一切都没问题；但是部署到服务器上时却出现布局错乱，经过排查发现总是少了一个图片高度的距离，原因是本地图片加载速度很快，在jquery的 $(document).ready 时，图片已经渲染出来，后来的计算是在图片已经出来时计算的；但是服务器网络原因，图片总是加载很慢，在进入到$(document).ready里的计算位置时，图片还没加载完成，导致获取位置信息的API计算不正确。

解决：

　　其实只要是获取关于图片或元素异步加载的比较慢时，使用获取宽度，高度，相对高度，相对位移都会出错，这时我们需要使用 $(window).load()即可解决元素加载不完全的问题。

　　大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready 事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，但文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使 用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使 用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
 　　var divid = $("#cc"); //指定要获取元素的id
 　　var p=divid.position().top; //获取元素相对于父元素y轴位置
 　　var k=divid.width(); //获取元素宽度
 }); 

延伸：

jquery获取元素坐标位置的两种方法：

1、获取元素在文档中的位置:

var X = $(‘#DivID‘).offset().top; 
var Y = $(‘#DivID‘).offset().left; 

2、获取相对(父元素)位置: 

var X = $(‘#DivID‘).position().top; 
var Y = $(‘#DivID‘).position().left;