Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

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.
0
Easwaran Paramasivam
Asked:
Easwaran Paramasivam
2 Solutions
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now