Performance issue - Jquery

Team,
Am facing a performance issue after i use add/remove class options to toggle expand n collapse a table row.

Here is the below function,
function toggleActiveList(count) {

	var ele = document.getElementById("Hidplan"+count);
	var iconele = document.getElementById("iconImg"+count);
	
	if(ele.className == "closed") {  	
		ele.className = "open";
		//iconele.className = "expanded";
		iconele.src = "/app/resources/images/maximize.gif";
	}else { 	
		ele.className = "closed";	
		//iconele.className = "collapsed";
		iconele.src = "/app/resources/images/minimize.gif";
	}
}

I do realize if there is an issue with accessing the image could cause slowness.
if there is an issue in accessing , i might get some other exception.
any help/tips appreciated.
LVL 16
Easwaran ParamasivamAsked:
Who is Participating?
 
KhiluCommented:
Use image sprites for icon.

1) Set background image for icon.
2) Using css set the background position.
3) Keep this css in "open" or "closed" css class.

This will work faster than assigning the source.

http://www.w3schools.com/css/css_image_sprites.asp

http://stackoverflow.com/questions/1069800/sprites-vs-image-slicing
0
 
nmarunCommented:
Use the http://jsperf.com/ site. You can add two test cases - one that sets the class and the other sets the src property and see which one gives better results.

Arun
0
 
MrunalCommented:
Why not you use toggle() function in jQuery.

Check this example:

http://jsfiddle.net/jbfyT/

reference:

http://api.jquery.com/toggle/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MrunalCommented:
Hi,
If you are very interesting in jquery performance and your images are not so graphical then you can use simple text change...for this functionality:

Have a look over this:

http://jsfiddle.net/jbfyT/1/

Hope this helps you.
0
 
Easwaran ParamasivamAuthor Commented:
Hi there,
i tried using the above toggle JS code to add tiplink, it slows down the performance.

function toggleActiveList(count) {

      var ele = document.getElementById("Hidplan"+count);
      var iconele = document.getElementById("iconImg"+count);
     
      if(ele.className == "closed") {        
            ele.className = "open";
            //iconele.className = "expanded";
            iconele.src = "/app/resources/images/maximize.gif";
      }else {      
            ele.className = "closed";      
            //iconele.className = "collapsed";
            iconele.src = "/app/resources/images/minimize.gif";
      }
}
I have attached the expand n collapse table rows for reference.

 I was trying to load the image during the page load, and was trying to use it on further requests. still i get un-responsive script error in IE. it works well in FF. and google chrome its slow.but not giving script error. please assist.
expandNCollapse.JPG
0
 
leakim971PluritechnicianCommented:
what about :

could you replace your icons with something like :

<div id="" class="closed">
     <img src="/app/resources/images/maximize.gif" />
     <img src="/app/resources/images/minimize.gif" style="display:block;position:absolute;left:0;right:0" />
</div>

Open in new window


so to set it maximized you just need to hide the second one
0
 
Easwaran ParamasivamAuthor Commented:
Experts,
Thanks for the overwhelming responses. after i replace the above code snippet, the performance was bit Ok. however our prototype team took care of this expand functionality
using the CSS sprite image load heavily reduces the over head.

Thanks all for your support.

Regards,
Easwar
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.