Preload Image to prevent "blinking"

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

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.