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 mouseover
ed, 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