値.position().left
に警告すると、 Chrome で0が返されます。他のブラウザでは、実際の数を返します。なぜこれが起こるのですか?
Webkitベースのブラウザ(ChromeやSafariなど)は、画像が完全に読み込まれた後にのみ、画像のwidth
およびheight
プロパティにアクセスできます。他のブラウザは、次のようにこの情報にアクセスできます。 DOMだけがロードされるとすぐに(サイズを知るために画像を完全にロードする必要はありません)。
したがって、ページに画像がある場合、Webkitベースのブラウザでは、$(window).load
イベントの発生後ではなく、$(document).ready
イベントの発生後にoffset
情報にアクセスする必要があります。
http://api.jquery.com/position/ からのコメントを読むことにより、これを修正するいくつかの方法があります。私が働いていると思ったのは
Ajaho [モデレーター]:このプラグイン関数は、Chromeの間違った位置に関する問題を修正します
jQuery.fn.aPosition = function() {
thisLeft = this.offset().left;
thisTop = this.offset().top;
thisParent = this.parent();
parentLeft = thisParent.offset().left;
parentTop = thisParent.offset().top;
return {
left: thisLeft-parentLeft,
top: thisTop-parentTop
};
};
Webkitは高速すぎる場合がありますが、jQueryで処理されることがよくあります。次のようなものを使用してデバッグできます。
_var v, elem = $('.myElement');
window.setTimeout(function() {
v = elem.position().left;
console.log(v);
if (v) {
return false;
}
window.setTimeout(arguments.callee, 1);
}, 1);
_
これにより、ポジションが利用可能かどうか、いつ利用可能かがチェックされます。無限大で「0」をログに記録している場合、position().left
は「決して」使用できないため、他の場所でデバッグする必要があります。
私も同じ問題を抱えていました。
代わりに.offset().left
を使用して修正しました。ただし、同じではないことに注意してください: http://api.jquery.com/offset/
.position().left
はChromeで、Davidと同様のアプローチを使用して行ったいくつかのテストで機能しました(値は最初の試行以降利用可能でした)。
私の「実際の」アプリケーションでは、クリックイベントの位置を読み取っても失敗しました(これにより、読み込み速度の問題が解消される可能性があります)。 (他のフォーラムの)いくつかのコメントは、それがdisplay:inline-block
の使用に関連しているかもしれないと言っています。ただし、inline-block
を使用して問題を再現することはできませんでした。だからそれは他のことかもしれません。
質問の日付が2010年なので、おそらく少し時代遅れですが、これはChromeでの位置の問題のトリックになりました。
$(window).load(function(){
p = $('element').offset();
// et cetera
});
私にとっては、bodyタグを閉じる直前にJavaScriptコードをドキュメントに配置することで機能しました
そうすれば、すべてをロードした後にコードを実行します
<body>
<div>content</div>
<div class='footer'>footer</div>
.
.
.
<script type='text/javascript>
$(document).ready(function(){
var footer_position = $(".footer").offset().top;
console.log(footer_position);
});
</script>
</body>
jQuery(document).ready()の代わりにjQuery(window).load()を使用する