8

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

$.loadImages(['1.jpg'、'2.jpg'などなど])

4

2 に答える 2

6

ちらつきは、おそらく画像の読み込みによるものです。これを防ぐために、すべての画像をプリロードして機能させることができます。

for (var x = 1; x <= 21; x++) {
    (new Image).src = 'images/' + x + '.jpg';
}
于 2013-02-04T22:53:02.630 に答える
1

最初に画像をプリロードする必要があるようです。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; 
            }
        }
    });
});

参照: JavaScript/jQuery を使用して画像をプリロードする決定的な最良の方法は?

于 2013-02-04T23:01:44.290 に答える