webentwicklung-frage-antwort-db.com.de

jQuery-Positionsproblem mit Chrome

Wenn ich den Wert .position().left alarmiere, gibt er in Chrome 0 zurück. Bei anderen Browsern wird die aktuelle Nummer zurückgegeben. Warum passiert das?

jquerygoogle-chromeposition
20
goksel

Webkit-basierte Browser (wie Chrome und Safari) können nur dann auf die Eigenschaften images width und height zugreifen, wenn die Images vollständig geladen wurden. Andere Browser können auf diese Informationen zugreifen, sobald nur das DOM geladen ist (sie müssen die Bilder nicht vollständig laden, um ihre Größe zu ermitteln).

Wenn Ihre Seite Bilder enthält, sollten Sie mit Webkit-basierten Browsern auf offset Informationen zugreifen, nachdem das Ereignis $(window).load ausgelöst wurde, und nicht nach dem Ereignis $(document).ready.

35
Black Shell

Wenn Sie die Kommentare von http://api.jquery.com/position/ lesen, gibt es mehrere Möglichkeiten, dies zu beheben. Das, was ich als funktionierend empfunden habe, ist

Ajaho [Moderator]: Diese Plugin-Funktion behebt Probleme mit der falschen Position in 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
    };
};
8
user227353

Webkit kann manchmal zu schnell sein, wird jedoch häufig in jQuery behandelt. Sie können das Debuggen folgendermaßen durchführen:

var v, elem = $('.myElement');
window.setTimeout(function() {
    v = elem.position().left;
    console.log(v);
    if (v) {
        return false;
    }
    window.setTimeout(arguments.callee, 1);
}, 1);

Dies überprüft, ob und wann die Position verfügbar ist. Wenn Sie unendlich "0" protokollieren, ist die Funktion position().left "never" verfügbar und Sie müssen an anderer Stelle debuggen.

7
David Hellsing

Ich hatte das selbe problem ..

Ich habe es behoben mit: .offset().left statt. Aber sei dir bewusst, dass das nicht dasselbe ist: http://api.jquery.com/offset/

.position().left hat in einigen von mir durchgeführten Tests in Chrome mit einem ähnlichen Ansatz wie David funktioniert (der Wert war seit dem ersten Versuch verfügbar).

In meiner "echten" Anwendung ist das Lesen der Position beim Klicken fehlgeschlagen (wodurch Probleme mit der Ladegeschwindigkeit möglicherweise beseitigt werden). Einige Kommentare (in anderen Foren) besagen, dass dies möglicherweise mit der Verwendung von display:inline-block zusammenhängt. Ich konnte das Problem jedoch nicht mit inline-block reproduzieren. Es kann also eine andere Sache sein.

6
lepe

Vielleicht etwas veraltet, da die Fragen aus dem Jahr 2010 stammen, aber das hat meine Positionierungsprobleme in Chrome gelöst:

$(window).load(function(){
  p = $('element').offset();
  // et cetera
});
4
Hekman

Bei mir funktionierte es, indem der Javascript-Code kurz vor dem Schließen des Body-Tags in ein Dokument eingefügt wurde

Auf diese Weise wird der Code ausgeführt, nachdem alles geladen wurde

    <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>
0
Martin Taleski

benutze jQuery (window) .load () anstelle von jQuery (document) .ready ()

0
zuckerhut