Preload Image to prevent "blinking" [duplicate]

This question already has an answer here:

• Image preloader javascript that supports events 3 answers

So, I am just starting to get into web dev. I am having a problem with Screentask software. http://ift.tt/1gMCrTT

When I use it on a raspberry pi 2 running ubuntu (lxde) running firefox 33. it blinks. I am sure this has to do with buffering the image before the switch. However I have little to no idea how to do this. I ran into the similar problem when I was coding C# applications, but I have not done any web coding.

<img> blinks when src change in Firefox

Here is the code that affects the image.

<img id="imgPrev" src="ScreenTask.jpg" class="img-responsive" alt="LIVE! Sever Screen Now!" />

var timer = setInterval(function () {
        var ImagePreview = document.getElementById('imgPrev');
        ImagePreview.src = 'ScreenTask.jpg?rand=' + Math.random();
    }, refreshInterval);

I then changed it to this

        var timer = setInterval(function () {
        var ImagePreview = document.getElementById('imgPrev');
        var ImagePreviewtemp = 'ScreenTask.jpg?rand=' + Math.random();
        ImagePreview.src = ImagePreviewtemp
    }, refreshInterval);

It still blinks.. I figured it would have Loaded the image into ImagePreviewtemp then after that loads dump it into. The site is linked to software that captures the screen and splits it out to jpg and then hosts the jpg on a website. So every 500ms or so it switches the image. This is important as I use the software to stream one system's screen across 14 others.

Any help would be helpful. This is the last of many problems on this project, If I cant fix it I will have to switch some other code to chromium.

Edit: Not sure this helps. looks like they got the code from here to start with.

http://ift.tt/1E6m1U0

--- Edited added 3-27-15 Created a new buffering that used a off screen image box to buffer the image.

.hiddenImageTemp {
    position: absolute;
    left: -3000px;
}

<img id="imgPrev2" src="ScreenTask.jpg" class="hiddenImageTemp" alt="LIVE! Sever Screen Now!"

document.getElementById('imgPrev').src = document.getElementById('imgPrev2').src;
document.getElementById('imgPrev2').src = this.src;

However this still blinks. During creating this I noticed the blinking stops now when firefox Developer tools (inspector) is open. I removed the new code and with the dev-tools open it blinks with the old code just a lot less.

What could the Firefox Developer Tool (inspector) do to stop this blinking?