robsite

In jquery

jQuery Speedup bei vielen Events

Firefox 3 ist extrem lahm beim verlassen einer Seite, wenn man jQuery benutzt und sehr viele (>1000) Elemente an Events bindet.

Beispiel. 5000 divs, dann:

$("div").hover(function() { 
    $(this).addClass('highlight'); 
},
function() {
    $(this).removeClass('highlight');
})

Seite läd, funktioniert, man klickt auf nen Link zu ner anderen Seite, wartet ein wenig und...

/images/posts/0000/1600/ffjqueryhang_big.jpg

Stellte sich heraus, dass jQuery beim verlassen der Seite die Eventbindungen aller Elemente entfernt. Genau daran bricht Firefox aber verzweifelt zusammen.

Der Code dafür liegt in jquery-1.3.2.js von Zeile 3106 bis 3111 und verhindert anscheinend Speicherleaks im IE und mouseover-Fehler beim neuladen:

// Prevent memory leaks in IE
// And prevent errors on refresh with events like mouseover in other browsers
// Window isn't included so as not to unbind existing unload events
jQuery( window ).bind( 'unload', function(){ 
    for ( var id in jQuery.cache )
    // Skip the window
    if ( id != 1 && jQuery.cache[ id ].handle )
        jQuery.event.remove( jQuery.cache[ id ].handle.elem );
});

In jquery-1.3.2.min.js:

o(l).bind("unload",function(){for(var E in o.cache){if(E!=1&&o.cache[E].handle){o.event.remove(o.cache[E].handle.elem)}}});

Ich hab ihn mal rausgeworfen, wodurch FF die Seite wieder schnell verlässt ohne zu hängen.

Bis jetzt hab ich keine mysteriösen Fehler beim refresh entdeckt. Auch Speicherleaks sind keine große Verschlimmerung der browser-experience für IE-Nutzer...

· jquery, webdev ·

jQuery Parallax Scrolling

Mit dem jQuery Parallax Plugin kann man schicke Scrolleffekte basteln:

jquery-parallax-scrolling.zip - 164 KB

Alles was man braucht sind ein paar Bilder, die dann vom Plugin gekachelt und horizontal verschoben werden. Durch unterschiedliche Geschwindigkeiten entsteht der Eindruck räumlicher Tiefe. Damit es Abstände zwischen den Bildern gibt (z.B. den Planeten und Raumcruisern oben), fügt man diese einfach direkt ins Bild ein:

/images/posts/0000/1132/parallax_planet_big.jpg

Um die Geschwindigkeit besser kontrollieren zu können, sollten alle Bilder die gleiche Breite haben.

Auch lustig ist jParallax, mit dem die Ebenen direkt per Mausposition verschoben werden:

/images/posts/0000/1138/jparallax_big.jpg

· jquery ·

Ajaxian » The fundamental problems with CSS3

Bis die vorgeschlagenen Änderungen in den Browsern ankommen, falls überhaupt, vergeht noch mehr Zeit als CSS 3 ohnehin schon braucht.

Here’s what we do need:

  • DOM traversal, reference, and injection on the same order provided by jQuery. There’s a damned good reason why designers are flocking to jQuery.
  • Programmatic variables, and basic Math

JavaScript/jQuery ist in der Tat ne gute Übergangslösung. Mit JS ist immer mehr möglich und das dank jQuery in allen modernen Browsern. Es gibt dagegen keine "CSS-Library", die gleiche Funktionalität auf verschiedenen Browsern garantiert.

Einige gute jQuery-Plugins, die ich benutzt hab:

Selbst den Internet Explorer kann man mit JS dazu prügeln, sich standardkonform zu verhalten: ie7-js

· css, javascript, jquery, webdesign ·

rest_in_place

Elegantes In-Place Editor Plugin für Rails. Benutzt jQuery oder Prototype.

Sehr chique: Wenn der Controller schon RESTful aufgebaut ist und auf JavaScript-Anfragen XML zurückschickt, ist die (serverseitige) Arbeit erledigt und es funktioniert einfach.

Gibts Probleme mit jQuery und Rails' Forgery Protection (InvalidAuthenticityToken oder so), hilft es, das hier in den <head> von application.html.erb zu packen:

<%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? %>

Und dies hier

$.ajaxSetup({
  beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} 
});

in application.js sorgt dafür, das jQuery die richtigen Header sendet und mit respond_to zusammenarbeitet.

· javascript, jquery, rails, rest, ruby, tool ·