jQuery, remove flicker when changing background image

Question

I'm trying to remove a flicker in Chrome, and FF although its much less in FF. The script scrolls through 20 background jpg's according to horizontal mouse position. This kind of works but very flickerish.

jQuery

$( document ).ready( function() {
var xSlider = $("#third"); //cache
var loopvar = 10; //set start img to 10
xSlider.css({backgroundImage : 'url(images/' + loopvar + '.jpg)'}); 
document.onmousemove = function(e){
        var mouseposimg = Math.floor(e.pageX / Math.floor($(window).width() / 20) + 1);
        if (mouseposimg > 20) { mouseposimg = 21; } //if outside browser
        if (mouseposimg < 0) { mouseposimg = 1; }

        if(loopvar != mouseposimg) { 
            xSlider.css({backgroundImage : 'url(images/' + mouseposimg + '.jpg)'}); 
            loopvar = mouseposimg; 
        }


};

});

CSS

#third{
background: no-repeat 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

HTML

<div id="third">
</div> 

Forgot to mention I do preload with this

(function(d){var h=[];d.loadImages=function(a,e){"string"==typeof a&&(a=[a]);for(var f=a.length,g=0,b=0;b<f;b++){var c=document.createElement("img");c.onload=function(){g++;g==f&&d.isFunction(e)&&e()};c.src=a[b];h.push(c)}}})(jQuery);

$.loadImages(['1.jpg', '2.jpg', etc etc etc])

Answer 1

The flicker is probably due to the image loading. You can just preload all of the images to work to prevent this:

for (var x = 1; x <= 21; x++) {
    (new Image).src = 'images/' + x + '.jpg';
}