CODEWITHSUNDEEP
phphtml
themeparkfocus
themeparkfocus

Reputation: 187

Rating system image efficiency

I'm building a 5 star rating system on my site and have two options to display the images that show the stars. These images representing a rating will be shown one per record on a list that will grow to be about 200 - 300 records long.

option one: a complete image for each possible rating including half stars. So I would need 11 images from 00000(no rating yet) to 11111(5 star). This way means the webpage would load 9 images but only show one image per row of the list.

option two: three images 0(no star), 1/2(half star), 1(1 star). So the page only loads 3 images but for each row of the list a combination of 5 images is shown to make the 5 star rating. for example 1,1,1/2.0.0 (2.5 stars).

So the question is whats more efficient less images being loaded but 5 times as many shown on the webpage or more images loaded but 5 times less being shown per record. I want the method that will load the page quickest with a list of 200 items.

Thank you.

Upvotes: 0

Views: 145

Answers (1)

Steven Bennett
Steven Bennett

Reputation: 96

Here's the most efficient method.

Take those 11 images of the different rating possibilities and put them into one large image file with the different possibilities stacked on top of each other. Then you can use CSS to set the background of an element that will be used to represent the stars. Whenever a user hovers over or clicks the element housing this sprite you can change the element's background positioning using CSS to show a different representation of the rating.

#ratings {
   background-image: url('myratingssprite.png');
   background-position: 0 0;
}
  #ratings:hover {
    background-position: 0 150px; /* Change the background's position to a more suitable area of the ratings sprite */
  }
  #ratings.four_stars {
    background-position: 0 200px; /* Move around the sprite to show the area with the 4 stars representation */
  }

Upvotes: 1

Related Questions