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/

仅在完全加载后显示背景gif？

1 个答案: