SCSS Mixin for Preloading Images with Cross Browser Opacity

Preloading Images with Cross Browser Opacity

A simple SCSS mixin here for setting the opacity on preload to 0, and when the image is loaded to a value of your choice (in this example its 90%, use 1 as your value for 100%)

 
@mixin opacity($opacity) {
opacity: $opacity;
 $opacity-ie: $opacity * 100;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$opacity-ie+")";
 filter: alpha(opacity=$opacity-ie); }

Usage

img.preload{
    @include Opacity(0);

    &.complete{
        @include Opacity(0.9);
    }
}