jQuery, Flicker entfernen, wenn Hintergrundbild ändern

Ich versuche, ein Flimmern in Chrome und FF entfernen, obwohl es viel weniger in FF ist. Das Skript scrollt durch 20 Hintergrund-JPGs entsprechend der horizontalen Mausposition. Diese Art von Arbeiten ist aber sehr flackernd.jQuery, Flicker entfernen, wenn Hintergrundbild ändern

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>

vergessen ich mit diesem

(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 keine Vorspannung zu erwähnen

$ .loadImages (['1.jpg', '2.jpg' usw. etc))

Quelle

2013-02-04 Olivier Langelaar

Haben Sie jemals herausfinden, wie diese zu glätten? Ich recherchiere und versuche das zu klären. Ich habe vorinstalliert und getestet, aber ich bekomme ein Flimmern, wenn das CSS das Bild aktualisiert. –

Ich landete alle Bilder in 1 großes Bild und ändere den Offset mit css –

Das Flimmern ist wahrscheinlich auf das Laden des Bildes zurückzuführen. Sie können nur alle Bilder vorab laden, um dies zu verhindern:

Quelle

2013-02-04 22:53:02

vergessen zu erwähnen, ich tun preload siehe oben –

@OlivierLangelaar versuchen meine Methode oben, kam ich über viele Preloading-Techniken, die nicht gut vor dem Bau funktionieren mein eigenes. Es kann gut sein, dass Ihre Vorlade-Methode nicht wie erwartet funktioniert. – Mahn

Danke versucht, Ihre und einige andere, immer noch einige flimmern obwohl Denken Sie das Problem liegt in der Tatsache, dass jedes Pixel der Maus bewegt den Hintergrund wird gesetzt. Das ist eine Menge Zeit auf einem 1000px Bildschirm –

Klingt so, als müssten Sie zuerst die Bilder laden. Holen Sie sich das imagesLoaded Plugin und versuchen Sie Folgendes:

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

Siehe auch: The definitive best way to preload images using JavaScript/jQuery?

Quelle

2013-02-04 23:01:44 Mahn

jQuery, Flicker entfernen, wenn Hintergrundbild ändern

Antwort

Verwandte Themen