Skip to content
  • 3D Druckservice
    • Kontaktformular
  • About / Impressum
bardiir.netAlles rund um Mac, iPhone, Video, Foto, Web,...
  • 3D Druckservice
    • Kontaktformular
  • About / Impressum

Javascript onResize Event fehlt?!

12. April 2012JavaScript / jQuery, Programmierung Standard

Responsive Webdesign ist derzeit das ganz große Thema im Web, und während der Entwicklung bin ich heute über ein richtig witziges Problem gestolpert.

Zum Einsatz kam dabei ein Javascript-Slider welcher die Größe per Javascript an das Browserfenster anpasst… meistens zumindest, denn manchmal funktioniert es einfach nicht.
Nach einigem herumstochern im Code sah es so aus als würde das resize-Event einfach fehlen, doch es handelt sich hierbei wohl eher um eine Race-Condition bei der die resize-Events des Browsers einfach schneller eintreffen als der Code die Seite neu rendert. Dadurch kam es ab und zu eben zu solch einem Fall, dass die alte Berechnung als letzte Änderung aufschlug und der Slider die falsche Höhe bekam.

Abhilfe gibt es in solchen Fällen leider nicht so wirklich, der Lösungweg ist äußerst hässlich. Aber vielleicht hilft das Snippet ja dem einen oder anderen der in der selben Lage ist und nicht einfach so schnell mal den Code robuster gestalten kann weil er an eine Library gebunden ist oder ähnliches.
(Richtig wäre, die Events mit einem leichtgewichtigen Handler abzufangen und dann, nach einem gewissen Timeout zu rendern oder eben vor dem Auftrag des neuen Events die Queue an Berechnungen vorher leeren)

Das Code-Snippet sieht wie folgt aus: (benötigt jQuery)

(function(a,b,c,d){var e=0;var f=0;a.setInterval(function(){var c=b(a).height();var g=b(a).width();if(e!=c||f!=g){var h=b.Event("resize");b(a).trigger(h);a.setTimeout(function(){e=c;f=g},d)}},c)})(window,jQuery,200,3000)

Was es tut ist relativ einfach:

Alle 200ms wird überprüft ob sich die Browsergröße geändert hat. Hat sich die Browsergröße in den letzten 3000ms geändert, so wird bei jedem Durchlauf ein resize-Event gefeuert. Insgesamt also 15 Events auf 3 Sekunden verteilt. Das sollte auch dem langsamsten Code ausreichen.

Die 200ms und 3000ms sind im Funktionsaufruf konfigurierbar und nach belieben anpassbar. Für langsame Scripte nach oben, für Scripte die sich nur wenig danebenbenehmen nach unten.

  • Facebook
  • Twitter
  • Google
  • Reddit
  • RSS Feed

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

3D Druckservice

3D Druck bestellen

Neueste Beiträge

  • Mit dem 3D Drucker Geld verdienen?!
  • Gehäuse für den CTC 3D Drucker
  • CTC Replicator zeigt nurnoch Unsinn auf dem LCD Display an
  • Mein neuer 3D Drucker
  • Laden eines Apple Laptops am Netzteil verhindern

Kategorien

  • 3D Drucker
  • Foto
    • Bilder mit CC-Lizenz
    • Fotografie
  • Hardware
  • iPhone
  • Mac OS X
  • Programmierung
    • HTML / CSS
    • JavaScript / jQuery
    • PHP / ZendFramework
  • Video
    • FFMPEG
  • Zusammengewürfeltes

Neueste Kommentare

  • Uli bei Sparsebundle Maximalgröße ändern
  • Track Qser bei Sparsebundle Maximalgröße ändern
  • FS bei Hüpfende Dock-Icons ausschalten
  • FS bei Hüpfende Dock-Icons ausschalten
  • Andreas bei Sparsebundle Maximalgröße ändern

Blogroll

  • Tintendatenbank Ein aktuelles Nebenprojekt von mir, Indizierung von Füllertinte mit Eigenschaften
  • Wonderland of Oz Meine Schwester auf Australientour

Me@Web

  • bardiir @ Amazon Wunschliste
  • bardiir @ Facebook
  • bardiir @ XING
  • bardiir @ Google+
  • bardiir @ Stackoverflow

Copyright bardiir.net 2023 | Theme by ThemeinProgress | Proudly powered by WordPress