jquery offset positon 獲取位置不准的解決方法

 

問題：

本地開發時，由於使用了圖片，而且使用了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;