Chrome上的背景图像渲染得太晚

问题是，在使用JavaScript将类添加到我的按钮元素后，应该在更改后显示的背景图像（.gif）渲染得太晚。Chrome上的背景图像渲染得太晚

该按钮是表单提交。点击后，JavaScript中会添加一个“点击”类。 CSS样式表示带有“clicked”类的按钮应显示背景图像加载器动画。它确实，但不知何故晚了（点击后0.5-1.0秒），通常在提交之后重新加载页面之前甚至没有做出。在类添加并检查了开发人员工具中的DOM后，我暂停了JavaScript。该类已经添加，但通常（有时是这样）图像不显示。

这里有一个小提琴模仿这种行为：http://codepen.io/rjk/pen/rGntD

的问题存在于Chrome浏览器。 Firefox会立即显示所有内容，就像它应该那样。

有人知道如何强制Chrome即时显示更改并删除此不确定性吗？

我的JavaScript（经过一些简化）如下：

function loadingClickHandle(button, style) { 
    jQuery(button).addClass(style + "-clicked"); 
} 

loadingClickHandle(this, "button-blue"); 
$("form:first").submit();

来源

2014-06-17 Robert Kusznier

您可以预加载这个backgound背景：-norepeat ;背景位置：100％100％;并通过您的类替换背景位置 –

使用压缩的图像 – Animesh

在JavaScript中设置background-repeat和background-position并没有帮助。我的图片是动画，所以我不能使用除.gif之外的任何其他格式。 –

这里是将图像转换为base64字符串的解决方案。这样浏览器就不需要从服务器请求图像，从而产生延迟。

我要说的是，它只是一个好主意，如果你有小的形象，因为base64编码增加了数据的大小...

大致来说，Base64编码的二进制数据的最终大小等于原始数据大小的+ 1.37倍+ 814字节（用于标题）。

来源http://en.wikipedia.org/wiki/Base64

根据您提供的代码用于将图像

.blue-button { 
    background-color: #1b9bdd; 
    color: white; 
    height: 30px; 
    padding-left: 14px; 
    padding-right: 14px; 
} 

.blue-button.clicked { 
    background-image: url(data:image/gif;base64,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); 
    background-repeat: no-repeat; 
    background-position: center; 
    color: transparent; 
}

演示HERE

工具是HERE

来源

2014-06-18 22:32:10 Prashank

Chrome上的背景图像渲染得太晚

回答

相关问题