JQuery, remove flicker when changing background image

Question

I am trying to remove flicker in Chrome and FF, although its much less in FF. The script scrolls 20 background jpg according to the horizontal position of the mouse. This kind of work, but very flickering.

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 that I preload 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.])

Answer 1

Flickering is probably due to image loading. You can simply preload all images to prevent this:

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

Answer 2

It looks like you need to preload the images. Get the imagesLoaded plugin and try the following:

 function preload(sources, callback) { if(sources.length) { var preloaderDiv = $('<div style="display: none;"></div>').prependTo(document.body); $.each(sources, function(i,source) { $("<img/>").attr("src", source).appendTo(preloaderDiv); if(i == (sources.length-1)) { $(preloaderDiv).imagesLoaded(function() { $(this).remove(); if(callback) callback(); }); } }); } else { if(callback) callback(); } } $(document).ready( function() { var xSlider = $("#third"); //cache var loopvar = 10; //set start img to 10 var filesToPreload = []; for(var x = 1; x <= 21; x++) filesToPreload.push('images/' + x + '.jpg'); preload(filesToPreload, function() { 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; } } }); }); 

See also: What is the best way to preload images using JavaScript / jQuery?