Thursday, 15 July 2010

javascript - How to optimize these jquery functions? -



javascript - How to optimize these jquery functions? -

i'm working on javascript intensive user-interface application. (at to the lowest degree it's intensive me, it's first serious javascript project).

i have few jquery functions going whenever div rolled on or mouseout. illustration there divs draggable objects, , when mouseovered, cursor must ready move. interface slow boss thinks code isn't working, when in fact is, it's slow , user has wait upto 2-3 seconds cursor expected, or div expected. example. code below, can't reproduce exclusively or since company has copyrights on this, give clear thought of way i'm doing things:

$.fn.extend({ mouseoverbox: function() { homecoming this.each(function() { var $this = $(this); if(!$this.hasclass('ready')) { if($this.hasclass('activated')) { $this.removeclass('activated'); } $this.addclass('ready'); } var img_id = $this.children('.theimg').attr('id'); //someitem.children('somechildren').remove(); //someitem.append(somemenu div) //$this.draggable(); //$this.resizable(); if($this.hasclass('unlocked')) { $this.draggable( "option", "disabled", false ); $this.resizable( "option", "disabled", false ); } $this.bindunlock(); }); } // end mouseoverbox });

now mouseoverbox function, triggered mybox.mouseoverbox(). on mouse on event. of course of study plugin calling bindunlock() has simple operations changing classes , adding classes menu. also, before mouseover, there's been mouseout out of div... can see there's lot of stuff happening. there aren't more 10 interactive divs on @ 1 moment though. how can optimize kind of code? haven't given every specific trust me of relevant pretty much this.

i've gzipped javascript, css, images , fonts. tried minifying using yahoo compressor bloated 1 of files instead of compressing it.

for , feel, why not in css using hover pseudo classes, e.g.:

div.draggable:hover { background:yellow; cursor:ponter; }

that way class changing code potentially cutting down.

javascript jquery optimization user-experience pagespeed

No comments:

Post a Comment