jQuery, remove flicker when changing background image
css, html, jquery
Solution
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';
}
Problem
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])