1

This is my fiddle demo.

Most browsers when loading a gif image display each frame by frame as it loads, and it ruins the effect. how do i skip the loading part and straightaway display the image with a fade in.

.initials {
position:absolute;
background:{color:main color};
background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
color:white;
padding-top:20px;
padding-bottom:20px;
width:60px;
text-align:center;
font-size:20px;
box-shadow:0px 2px 3px rgba(0,0,0,.15); }
  • 1
    This may be what you are looking for: http://stackoverflow.com/questions/14373683/how-to-show-image-only-when-it-is-completely-loaded – xyzen Nov 30 '15 at 00:24

1 Answers1

0

One approach is to load the image in JavaScript and once it is loaded (using the onload handler), set it on the element you care about.

For example:

$(function () {
    var src = "http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif";
    var $e = $(".initials").css({ opacity : 0 });
    var img = new Image();
    img.onload = function () {
       $e.css({
            'background-image': "url(" + src + ")",
        }).animate({ opacity : 1.0}, 3000);
    };
    img.src = src;
});

(The example uses jQuery just for convenience.)

And here's a fiddle using the above: http://jsfiddle.net/zg24xcxx/5/

Bruce Winters
  • 43
  • 3
  • The whole div gets a fade in effect. is it possible for the background to be black until the gif fully loads and then, only the gif must fade in. http://jsfiddle.net/63utadgw/17/ –  Nov 30 '15 at 10:02