更改JavaScript中地位的背景下，奇怪的问题

Question

我有一个简单的问题，我想换一个画面，当用户滚动页面（使3D画面的错觉）

第一种方法是改变形象src每次（使8个不同的图片），但我可以看到浏览器时，我滚动的滞后，效果不好。这样，我就有了制作单个图像的想法，在用户滚动时改变背景位置。

这工作完美（当一切都加载）时，唯一的问题是当用户滚动，每当背景位置正在改变，浏览器重新加载图片。所以，等待会很多。看起来像加载不同的图片，但它只是一个。

我不明白为什么，图片总是一样的，为什么会出现这个问题？有人知道另一种解决方案？

这是脚本：

<script type="text/javascript"> 
jQuery('.qty-cart-btn2').hide(); 
jQuery('.shoes-360-2').css('backgroundImage','url(shoes_img1/360.png)'); 

    require(['jquery', 'jquery/ui'], function($){ 


jQuery(function(){ 
    jQuery(window).scroll(function(){ 

     if(jQuery(this).scrollTop() >= 30) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-264px'}) 

     } 

     if(jQuery(this).scrollTop() >= 45) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-528px'}) 

     } 

     if(jQuery(this).scrollTop() >= 60) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-792px'}) 
     } 
       if(jQuery(this).scrollTop() >= 75) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-1056px'}) 
     } 
       if(jQuery(this).scrollTop() >= 90) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-1320px'}) 
     } 

       if(jQuery(this).scrollTop() >= 105) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-1584px'}); 
     } 

       if(jQuery(this).scrollTop() >= 120) { 
      jQuery('#back-shoes') 
       .css({'background-position-y':'-1848px'}); 
     } 



    }); 
}); 
}); 
</script> 

非常感谢您

Answer 1

我解决了这个例子：

<div id="rotator"></div> 

$(function() { 

    var rotator = $('#rotator'); 
    var container = $(document); 
    var viewport = $(window); 

    var images = 72; 
    var imageHeight = 30000/images; 
    var scrollHeight = container.height() - viewport.height() + imageHeight; 
    var step = images/scrollHeight; 

    viewport.scroll(function(event) { 

     var x = -Math.floor(step * viewport.scrollTop()) * imageHeight; 
     rotator.css('background-position', x + 'px 0'); 

    }); 

body { 
    height: 2000px; 
} 

#rotator { 
    font-size: 416px; 
    width: 1em; 
    height: 1em; 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: -1; 
    background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0; 
} 

http://jsfiddle.net/coma/sBTzG/13/

谢谢大家

Answer 2

使用，如果在greather比条件和小于，如：

jQuery(function(){ 
jQuery(window).scroll(function(){ 
    var Scroll = jQuery(this).scrollTop(); 
    if(Scroll >= 30 && Scroll < 45){ 
     jQuery('#back-shoes').css({'background-position-y':'-264px'}) 

    } 
}); 

}）;