Why is the Jquery loading gif not showing on the first load?

Question

With the following CSS:

.ui-autocomplete-loading {
    background: url('/icons/loading.gif') no-repeat right center;
}

When loading is first used the loading gif is downloaded, and I think it takes too long and therefore does not show the first time it is used. It is there for subsequent usages.

How do I ensure the gif is already downloaded (Note the loading.gif is 2kb)

Possible duplicate of [Preloading CSS Images](http://stackoverflow.com/questions/1373142/preloading-css-images) — blgt, Apr 21 '16 at 11:19
Perfect, as long as this question can be searched for and found. — tread, Apr 21 '16 at 15:26

score 2 · Accepted Answer · answered Apr 20 '16 at 18:52

Preload it and cache it in the browser.

Somewhere on the page/in your javascript add this:

var image = new Image();
image.src = '/icons/loading.gif';
image.onload = function () {
  console.log('loading gif is ready to go!'); // remove this in production
};

Why is the Jquery loading gif not showing on the first load?

1 Answers1