仅在完全加载后才显示背景gif？ [复制]

Question

这是我的fiddle 演示。

大多数浏览器在加载 gif 图像时会在加载时逐帧显示，这会破坏效果。我如何跳过加载部分并直接显示淡入的图像。

.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); }

Answer 1

一种方法是在 JavaScript 中加载图像，一旦加载（使用onload 处理程序），将其设置在您关心的元素上。

例如：

$(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;
});

（示例使用 jQuery 只是为了方便。）

这是使用上述内容的小提琴：http://jsfiddle.net/zg24xcxx/5/