Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Performance issue - Jquery

Posted on 2013-01-27
8
Medium Priority
?
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 450 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 300 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

609 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