This happens because the new image source need to be loaded via a HTTP-Requests. So the image will be “empty” for a short while which forces the flickering. Once the new image is loaded by the browser, the image will be displayed in the browser.  There are different approaches to prevent this behavior. All solutions focusing a logic where the new image is preloaded in the browser. You could preload the image via DOM adding a hidden element into your HTML Document: