Solved

Performance issue - Jquery

Posted on 2013-01-27
8
256 Views
Last Modified: 2013-02-01
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
Comment
Question by:Easwaran Paramasivam
8 Comments
 
LVL 27

Expert Comment

by:nmarun
ID: 38825392
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
 
LVL 22

Expert Comment

by:Mrunal
ID: 38826052
Why not you use toggle() function in jQuery.

Check this example:

http://jsfiddle.net/jbfyT/

reference:

http://api.jquery.com/toggle/
0
 
LVL 3

Accepted Solution

by:
Khilu earned 150 total points
ID: 38826292
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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
LVL 22

Expert Comment

by:Mrunal
ID: 38826320
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38829624
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 100 total points
ID: 38836112
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
 
LVL 16

Author Comment

by:Easwaran Paramasivam
ID: 38843746
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question