Question

问题是在我使用JavaScript向我的button元素添加一个类后，在更改后应该显示的背景图像（.gif）被渲染得太晚了。

按钮是表单提交。点击后，一个班级＆＃34;点击＆＃34;在JavaScript中添加到它。 CSS样式表示按钮带有一个＆＃34;点击＆＃34;应该显示背景图像加载器动画。它确实如此，但不知何故迟到（点击后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();

Answer 1

以下是将图像转换为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

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

1 个答案: