Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Speeding up jQuery script, more efficient code not working

    Hello,

    I'm trying to improve a working script that slows down with high data volume.

    Here's what it does:
    When a thumbnail is rolled over, a corresponding div containing a larger image fades in (animate/opacity) elsewhere on the page.

    When another thumb is rolled over, the class of larger image divs fades out, then the new div fades in.

    With lots of thumbs, this gets slow. Each larger image div is dynamically written to html through php and hidden with css (opacity & display) until the jQuery fades it in, so from my understanding, those images are already loaded in the brower's cache. How can I reduce the lag in this animation? It's fine with a few thumbs, but very slow with a lot.

    Any help would be appreciated. Thank you.

    Code:
    function thumb_to_mid(target_items, name){ //target items are rolled over, name is class of objects being animated
    	$("."+name+":first").css({"display" :"block"}).animate({"opacity" :"1"}, 2500);
    	
    	if($(target_items).attr("rel") != "" && $(target_items).attr("rel") != "undefined" ){ //check to make sure rel isn't blank, then:	
    		$(target_items).hover( function(){
    				var div_id = $(this).attr("rel"); //grab this elements rel attribute
    				var this_mid_div = $("#"+div_id); //set var for mid image element
    				$("."+name).animate({"opacity" :"0"}, 100); //fade out previous mid pic
    				$("."+name).css({"display" :"none"}); //hid previous mid pic
    				this_mid_div.css({"display" :"block"}); //show current mid pic
    				this_mid_div.animate({"opacity" :"1"}, 500); //fade in current mid pic
    		});
    	}
    }

    Here's an example of the page with only 2 thumbs.
    Here's an example of the page with a lot of thumbs.
    Last edited by madmatter23; 01-27-2009 at 05:09 AM.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    shows excessive cpu on a p4... (poor netbooks)

    set another var to replace $("."+name).

    in fact, move it outside the hover function, perhaps as the first line.

    that way, the list of image is not re-built each time the image changes.

    also, set a var to $(target_items).attr("rel"), so you don't have to assess it each time.


    basically, try to avoid DOM-based $ usage, and you should see it get faster.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks for the tips. After taking your advice, here's what the code looks like:

    Code:
    function thumb_to_mid(target_items, name){ //target items are rolled over, name is class of objects being animated
    	$("."+name+":first").css({"display" :"block"}).animate({"opacity" :"1"}, 2500); //fade in first thumb as place holder
    	var animate_obj_class = $("."+name);
    	var target_rel = $(target_items).attr("rel");
    	
    	if(target_rel != "" && target_rel != "undefined" ){ //check to make sure rel isn't blank, then:	
    		$(target_items).hover( function(){
    				var div_id = $(this).attr("rel"); //grab this elements rel attribute
    				var this_mid_div = $("#"+div_id); //set var for mid image element
    				animate_obj_class.animate({"opacity" :"0"}, 100); //fade out class of recently displayed image
    				animate_obj_class.css({"display" :"none"}); //hide class of recently displayed image
    				this_mid_div.css({"display" :"block"}); //show current mid pic
    				this_mid_div.animate({"opacity" :"1"}, 500); //fade in current mid pic
    		});
    	}
    }
    Still running slowly... the animations run quickly at first, and then slows down a little while after the page loads. I'm not sure if that gives a significant clue to what's going on.

    I'm not very familiar with javascript so I'm not familiar with the most efficient ways to do things. Should this modification create an improvement?

    I was also thinking that perhaps, instead of having the entire animate_obj_class fade out, I should have just the most recent image fade out. I'm not sure if the jQuery is actually modifying every individual element in the class, therefore slowing things down, but I'm REALLY struggling to get a working script that modifies the most recent item.

    Does that make sense? Is it worth trying?
    Last edited by madmatter23; 01-27-2009 at 08:15 AM.

  • #4
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    OK, so, I think that based on your tips, the function is working fine.

    However! I think that I may have found the true culprit... it was the rollover effect! Why? Well I don't know. It's a pretty simple rollover effect, but once gone, everything speeds up entirely.

    The thing is I still need the rollover... So I'm not sure what to so.

    Here is the rollover script

    Code:
    function thumb_rollover(){
    	$(".thumb_li").hover( function(){
    		$(this).stop().animate({ 
    						"borderTopColor" : "#8EA6CF",
    						"borderRightColor" : "#8EA6CF", 
    						"borderBottomColor" : "#8EA6CF", 
    						"borderLeftColor" : "#8EA6CF"
    						}, 500);
    	
    	}, function(){
    		$(this).stop().animate({ 
    						"borderTopColor" : "#444444",
    						"borderRightColor" : "#444444", 
    						"borderBottomColor" : "#444444", 
    						"borderLeftColor" : "#444444" 
    						}, 500);
    	});
    	
    }
    I don't know how I could really make it any simpler. It loads after the function thumb_load slides the thumbs in:
    Code:
    function thumb_load() {
    	$(".thumb_li").css({ "display" : "none" });
    	$(".thumb_img").css({ "opacity" : "0" });
    	
    	$(".thumb_li").show("slide", {}, 1000, function(){ 
    		$(".thumb_img").animate( {"opacity" : "1" }, 2000, function(){
    			thumb_rollover();
    		})
    	
    	});
    	
    }
    Does any see any issue the these functions that would cause immense lag in hover animations?

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    I dont know too much about jquery...
    i do know that $(".xxx") is a slow way to grab elements, but i don't see from the code here how often thumb_load() fires either. if it's just once, no biggie. if a lot, you might want to cache the dom lookups.

    if you dont need the border to be animated, it would be faster to switch between two classes that define the hover/nonhover styles, and animate only the opacity.


    play around with firebug's profile feature and you can likely figure out where the pinch points are in the context of the page.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •