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獲取元素座標位置的兩種方法：

一、獲取元素在文檔中的位置:

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

二、獲取相對(父元素)位置: 

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