jQuery，删除更改背景图像时的闪烁

我正试图消除Chrome和FF中的闪烁，尽管它在FF中要少得多。 脚本根据水平鼠标位置滚动20个背景jpg。 这种方法很管用，但很不稳定

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


};

}

HTML

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

忘了提一下我确实预装了这个

(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);

---

（函数（d）{var h=[]；d.loadImages=function（a，e）{“string”==typeof a&&（a=[a]）；for（var f=a.length，g=0，b=0；b闪烁可能是由于图像加载引起的。您只需预加载所有图像即可防止出现这种情况：

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

for（var x=1；x听起来您需要先预加载图像。获取插件并尝试以下操作：

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

函数预加载（源代码，回调）{
if（源.长度）{
var preforderdiv=$（''）.prependTo（document.body）；
$。每个（源，函数（i，源）{
$（“20）{mouseposimg=21；}//如果在浏览器外部
如果（mouseposimg<0）{mouseposimg=1；}
如果（loopvar！=mouseposimg）{
css（{backgroundImage:'url（images/'+mouseposimg+'.jpg）}）；
loopvar=mouseposimg；
}
}
});
});

另请参见：
忘了提及我确实预加载请参见above@OlivierLangelaar尝试我上面的方法，在构建我自己的方法之前，我遇到了许多预加载技术，这些技术不太好用。很可能是你的预加载方法没有像你期望的那样工作。谢谢你尝试了你的方法和其他一些方法，尽管有些人认为问题在于鼠标移动背景的每一个像素都被设置好了。在1000像素的屏幕上，这是很多次的事情。你有没有想过如何平滑这一点？我正在研究和尝试解决这个问题。我已经预加载并测试了，但是当css更新图像时，我会得到一个闪烁。我最终把所有的图像放在一个大图像中，然后改变用css替换偏移量
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; 
            }
        }
    });
});