JavaScript更改提交表单上的输入样式

Question

I am trying to make same loading animation at the background of input when a form is submitted.

css:

.inputLoading {
  background-image: url("../img/loading.gif");
  background-repeat: no-repeat;
  background-position: 99% 50%;
}
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

javascript:

function onSearch(){
    document.getElementById("loadingAnimation").className += " inputLoading";
}

html:

<form action="index.php" method="get" onsubmit="onSearch()">
    <input type="text" id="loadingAnimation" class="form-control">
    <button type="submit">Search</button>
</form>

Problem is that this works in IE11 and Firefox 26 but not in Chrome 33. In Chrome there is no animation after form is submitted. URL to gif is correct. So I try to resolve the problem but no luck. It is strange that if I change only background color of input it will work everywhere.

Any ideas?

UPDATE: I have tested this on several computers and now I can tell that there is not problem only in Chrome. On some computers do not work even on FF or IE.

Answer 1

Make sure if any kind of adBlock extension or image block extension is installed on you chrome browser. It may be one of the reasons if image is not being displayed.