javascript - 背景图像在 Chrome 上渲染得太晚

Question

问题是在我使用 JavaScript 向我的按钮元素添加一个类之后，更改后应该显示的背景图像 (.gif) 呈现得太晚了。

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

这是模仿这种行为的 fiddle :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();

Answer 1

这是将图像转换为 base64 字符串的解决方案。这样浏览器就不必从服务器请求图像而造成延迟。

我会说，如果你有小图像，这只是一个好主意，因为 base64 编码会增加数据的大小......

Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).

来源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