jQuery、背景の画像を変更するときにちらつきを削除する

Question

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


}; 

}）。

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> 

は、私はこの

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

0でプリロードん言及を忘れました

$ .loadImages（['1.jpg'、 '2.jpg'など]など）

Answer 1

おそらく画像の読み込みによるものです。これを防ぐには、すべての画像をプリロードするだけで済みます。

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

Answer 2

最初に画像をプリロードする必要があります。 imagesLoadedプラグインを取得し、次のことを試してみてください。

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

も参照してください：あなたは、これを滑らかにするためにどのようにThe definitive best way to preload images using JavaScript/jQuery?