How to prevent images from reloading when leaving "display: none"

I am writing an Ember.js web-application, designed to be the user interface of an automation system, that polls data from the LAN server every two seconds in order to have on display always the "live" process data. This application is accessible from a wirless hotspot, to allow registered users to browse it, so potentially any device (tablets, smartphones, laptops...) could be the actual client.

On some pages, there are icons that change according to some conditions, and to implement this effect I declared several img tags, and I make the ones I dont need invisible by styling it with CSS display: none.

In HTML:

<img class="icon-active" src="/images/icon1.jpg" />
<img class="icon-inactive" src="/images/icon2.jpg" />

In Javascript, every two seconds:

var visibleElement = null;
var invisibleElement = null;

if( this.get("whatever").active == true )
{
    visibleElement = this.element.getElementsByClassName("icon-active")[0];
    invisibleElement = this.element.getElementsByClassName("icon-inactive")[0];
}
else
{
    visibleElement = this.element.getElementsByClassName("icon-inactive")[0];
    invisibleElement = this.element.getElementsByClassName("icon-active")[0];
}

visibleElement.style.display = null;
invisibleElement.style.display = "none";

Everything works fine, on laptops and tablets, but on some smarthphones, the images are loaded every time I set visibleElement.style.display = null;, it means, every two seconds, the visible icon is GETted again and again from server.

I dont want it to happen at first to reduce data traffic, that is not a problem at all, but I don't like fetching resources even if not required, second, the image reload generates an annoying flicker effect, that is really unlookable.

How can I force every client to cache images as tablets and laptops do?