Question

好的，所以我要为Watson界面构建前端，我购买了6种应该体现AI的gif动画。就像siri说话时的波形一样。

因此，我使用的div的背景图像样式属性设置为url（“ pathto”）。效果很好，但是如果我在javascript中执行此操作，则在gif的加载和卸载之间会有间隙。

另一方面，我尝试创建css类，每个类均包含其各自的动画属性“ background-image：url（“ pathto”）”，并且效果良好，但是动画在后台不断播放因此，当您切换到一个并且它已经被加载时，它会拾取它所在的位置并使它看起来非常不同步。

这是课程版本：

.ai-thinking-spinner {
    background-image: url( "assets/ai-thinking-spinner.gif" );
}

.ai-idle {
    background-image: url( "assets/ai-idle.png" );
}

.ai-initialization {
    background-image: url( "assets/ai-initialization.gif" );
}

.ai-initialization-idle {
    background-image: url( "assets/ai-initialization-idle.png" );
}

.ai-speaking {
    background-image: url( "assets/ai-speaking.gif" );
}

js：

app.changeAISource = function( clazz ) {
    // Not included here, but removes all of the classes above here
    $( "#ai-body" ).addClass( clazz );
}

切换它们的另一个版本是这样的：

app.changeAISource = function( src ) {
    $( "#ai-body" ).css( "background-image", "url( " + src + " )" );
}

我也尝试过像这样重新查询图像：

app.changeAISource = function( clazz ) {
    $( "#ai-body" ).css( "background-image", "url( " + clazz + "" + new Date().now() +  " )" );
}

但它再次导致加载间隙。

有什么建议吗？

gif重新启动/顺利加载

0 个答案: