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])

Did you ever figure out how to smooth this out? I am researching and trying to sort this out. I have preloaded and tested, but I am getting a flicker when the css updates the image. — Shawn Altman, Apr 22 '13 at 02:06
I ended up putting all the images in 1 big image and change the offset with css — Olivier Langelaar, Apr 07 '14 at 17:31

score 6 · Answer 1 · answered Feb 04 '13 at 22:53

6

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';
}

answered Feb 04 '13 at 22:53

Explosion Pills

188,624
52
326
405

forgot to mention I do preload see above – Olivier Langelaar Feb 05 '13 at 12:45
@OlivierLangelaar try my method above, I came accross many preloading techniques that don't work well before building my own. It might well be that your preloading method isn't working as you would expect. – Mahn Feb 05 '13 at 19:10
Thanks tried yours and some others, still some flicker though Think the problem lies in the fact that every pixel the mouse moves the background gets set. which is a lot of times on a 1000px screen – Olivier Langelaar Feb 11 '13 at 13:32

score 1 · Answer 2 · edited May 23 '17 at 10:26

Sounds like you need to preload the images first. 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: The definitive best way to preload images using JavaScript/jQuery?

jQuery, remove flicker when changing background image

2 Answers2