jQuery Anomalien

Von in javascript, jquery

Wird ein JavaScript-​Code nicht, oder noch schlim­mer, nur hin und wie­der beim Neu­la­den der Sei­te aus­ge­führt, könn­te der Feh­ler in der Rei­hen­fol­ge der refe­ren­zier­ten exter­nen Skrip­te und Style­she­ets lie­gen. Ich möch­te hier die­ses mit­un­ter schwer zu loka­li­sie­ren­de Pro­blem etwas näher erläu­tern.

Alles hat man brav befolgt, Styles befin­den sich in einem eige­nen File und wer­den kor­rekt ein­ge­bun­den und der JavaScript-​Code wird erst nach Laden des DOM mit­tels $(document).ready()-Function aus­ge­führt.

$(document).ready(function(){

});

Beim Tes­ten der Sei­te bemerkt man jedoch, dass das Java­Script offen­sicht­lich nicht auf die ange­spro­che­nen Ele­men­te wirkt und zu allem Über­druss scheint der Pro­gramm­code ein­mal zu funk­tio­nie­ren, um beim nächs­ten Mal wie­der zu ver­sa­gen. Dabei fällt auf, dass sich das Pro­blem eher repro­du­zie­ren lässt, wenn man den Cache des Brow­sers leert, bevor die Sei­te erneut gela­den wird, was ein ent­schei­den­der Hin­weis für die Pro­blem­lö­sung dar­stellt.

Die Vor­aus­set­zun­gen für die­ses Phä­no­men sind fol­gen­de:

  • Betrof­fe­ne Ele­men­te wer­den über CSS gesty­led.
  • Die­se Sty­lean­ga­ben befin­den sich in einer exter­nen Datei,
  • wel­che nach der $(document).ready()-Function ein­ge­bun­den wird.
  • Java­Script ver­sucht die vor­her über CSS gestyl­ten Ele­men­te zu ver­än­dern.

Offen­bar wir­ken sich die Argu­men­te im CSS-​File erst nach der Aus­füh­rung des Java­Scripts auf die Ele­men­te aus, wenn es dem Brow­ser nicht gelingt, das ein­ge­bun­de­ne File vor der Aus­füh­rung der $(document).ready()-Function aus dem Inter­net zu laden (dar­um tritt das Phä­no­men eher auf, wenn man zuvor den Cache leert und den Brow­ser zwingt, das File tat­säch­lich nach­zu­la­den). Das mag para­dox klin­gen, denn gera­de die $(document).ready()-Function soll ja sicher­stel­len, dass sich das Java­Script erst aus­wirkt, wenn die Sei­te und deren Inhal­te fer­tig gela­den wur­den. Augen­schein­lich gilt das aber nicht für exter­ne refe­ren­zier­te Style­she­ets und so fin­det man auch auf der Web­sei­te von jQue­ry in der Beschrei­bung zu .ready() fol­gen­den Hin­weis:

When using scripts that rely on the value of CSS style pro­per­ties, it’s important to refe­rence exter­nal style­she­ets or embed style ele­ments befo­re refe­ren­cing the scripts.

Share on LinkedInShare on Redditshare on TumblrShare on StumbleUponDigg thisShare on FacebookGoogle+Tweet about this on TwitterEmail to someone