jQuery, usuń migotanie podczas zmiany obrazu tła

Próbuję usunąć migotanie w przeglądarce Chrome i FF, chociaż jest on znacznie mniejszy w FF. Skrypt przewija 20 jpg w tle zgodnie z poziomą pozycją myszy. Ten rodzaj prac, ale bardzo migotliwy.jQuery, usuń migotanie podczas zmiany obrazu tła

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>

Zapomniałem wspomnieć Mam przekręceniem z tym

(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 etcetera itd.))

Źródło

2013-02-04 Olivier Langelaar

Czy kiedykolwiek dowiedzieć się, jak to się gładka? Badam i próbuję to rozwiązać. Mam preinstalowane i przetestowane, ale dostaję migotanie, gdy css aktualizuje obraz. –

Skończyło się na umieszczeniu wszystkich obrazów na 1 dużym obrazie i zmianie przesunięcia o css –

Migotanie jest prawdopodobnie spowodowane ładowaniem obrazu. Możesz po prostu wstępnie załadować wszystkie obrazy, aby temu zapobiec:

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

Źródło

2013-02-04 22:53:02

zapomniałem wspomnieć, że robię preload patrz wyżej –

@OlivierLangelaar wypróbuj moją metodę powyżej, przeszedłem przez wiele technik wstępnego ładowania, które nie działają dobrze przed budowaniem mój własny. Możliwe, że Twoja metoda wstępnego ładowania nie działa tak, jak byś tego oczekiwał. – Mahn

Pozdrowienia próbowałem twoje i kilka innych, wciąż trochę migotania Pomyśl, że problem polega na tym, że każdy piksel myszy porusza się w tle zostaje ustawiona. co jest wiele razy na ekranie o wielkości 1000 pikseli. –

Wygląda na to, że najpierw musisz załadować zdjęcia. Pobierz wtyczkę imagesLoaded i spróbuj wykonać następujące czynności:

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

Zobacz także: The definitive best way to preload images using JavaScript/jQuery?

Źródło

2013-02-04 23:01:44 Mahn

jQuery, usuń migotanie podczas zmiany obrazu tła

Odpowiedz

Powiązane problemy