Solved

Performance issue - Jquery

Posted on 2013-01-27
8
250 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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now