How to prevent a background image flickering on change

Preload your image like this, no need to include a <img> with display: none

<link rel="preload" href="/images/bg-min.png" as="image">

Try to preload the image resource to the device storage by including the image in DOM like in the following HTML-Code. Maybe the error comes up because the image resource need to be loaded which takes some time (flickering).

<img src="imageToPreload.png" style="display:none;" alt="" />

You may prefer to use sprites-images. By using sprites your application will need less HTTP-Requests to load all ressources into your page. Also add the following CSS styles if you are using css animations. It will prevent background flickering on mobile devices:

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

Try adding this css to your background element:

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

It should help with flickering..

You can also "force" hardware acceleration by adding this to your background element:

-webkit-transform: translate3d(0, 0, 0);

Another option is to use image instead of DIV and change only the image url.