CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Morne
Morne

Reputation: 1743

Which is more efficient, spritesheet or css classes

I want to implement feedback on a div when the user click on it. The div will quickly fade to another color and then back to its original color again.

My first option is to use a spritesheet, where I will change the background position property of the div. Part of the implementation looks like this:

pos = 0;
function fadeAction(el){
   if (pos != 100){
     pos += 10;
     $(el).css("background-position","0% "+pos+"%");
     setTimeout(function(){fadeAction(el);},10);
   }else
      pos=0;
   }

My second option is to change the background color according to an array of colors:

colors = ["#FF00FF","#443322", etc]; 
i = 0;
function fadeAction(el){
   if (pos != 10){
     i += 1;
     $(el).css("background-color",colors[i]);
     setTimeout(function(){fadeAction(el);},10);
   }else
      i=0;
   }

My third option (which will be scrapped due to device incompatiblity) is to use jquery.color.

function fadeAction(el){
  $(el).css("background-color",fadeColor);
  $(el).animate({
    backgroundColor: "#E9E9E9"
  }, 150 );

}

Which of these two methods (scrapping the third) will we the most efficient? There will be multiple buttons (div) on the page that will use this function and it will primarily be used on mobile devices with webkit browsers.

Upvotes: 2

Views: 98

Answers (2)

VDP
VDP

Reputation: 6420

Best performance is achieved with CSS3. This because it browser uses hardware acceleration.

EDIT: I was wrong (thanx Zougen Moriver) it isn't automatically triggered (see comment) but it has still better performance over the javascript solutions.

Here is an example:

.test {
    height: 100px;
    width: 100px;
    background-color: #eee;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
.test:hover {
    background-color: #fc3;
}

http://jsfiddle.net/Vandeplas/LZNZb/

I used hover because it doesn't need javascript, but if you change the color (via javascript, by adding a class or changing the style) it will fade to that color.

The downside is that it isn't supported on legacy browsers..

Here is an example using on click handler:

$('.test').on('click', function() {
    $(this).css('background-color', 'green');
    //$(this).addClass('otherColor');
});

http://jsfiddle.net/Vandeplas/LZNZb/1/

As you can see I commented out the other option using the class... both will work...

Upvotes: 2

Josh Harrison
Josh Harrison

Reputation: 5994

If you're just changing plains colours, the CSS style option will be more efficient than spritesheets. There will be no need for the browser to make an additional HTTP request for your spritesheet, and using CSS transitions you will be able to fade between the colours.

There will also be one less resource in the device's memory.

To transition the colour, apply this CSS:

.yourElement {
    -webkit-transition: color 150ms;
    transition: color 150ms;
}

..And continue using your JavaScript to toggle the colour changes on click.

Upvotes: 0

Related Questions