Sprite loading multiple times, not caching as I would expect

Question

I am trying to create a sprite mixin, based on the compass sprite mixins for SCSS.

The trouble is that the image is loading multiple times. One for each unique call of the image (so each new class name that refers to the sprite)

Here is the SCSS I am using. First we call the compass mixins:

$sprite-default-size:29px;
@import "compass/utilities/sprites/sprite-img";

Then I create my own mixin, designed to accept a column of images, with hover states to the right of each image:

$icons: "/assets/icons/socialMediaSprite.png";    
@mixin verticalHoverSprite($row){
        @include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
        &:hover{
            @include sprite-img($icons,2, $row);
        }
    }

The I use the apply the mixins to each required class:

 .socialMediaLink{


        @include verticalHoverSprite(1);

        &.facebook{
                @include verticalHoverSprite(2);
        }
        &.twitter{
                @include verticalHoverSprite(3);
        }

    }

Here is the HTML I am attaching the images to:

<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>

---

Screen shot from Chrome network panel, which shows the image loading three times:

Answer 1

Check that caching is not disabled in your browser (it can be disabled from about v17).

Another idea is you include your image only once:

background: url(yourimage.png) no-repeat;

And then only change it's position with CSS without including the image again:

background-position: 0px 100px;

I guess you are trying to do this way I would just suggest not to include the image for every class, change only the position.