jquery问题有时窗口滚动功能图像消失

Question

我遇到了一个奇怪的问题与jQuery（主要在Firefox和IE9）。这是情况。我有一个水平滚动网站，根据您的滚动位置和内容部分，右上角的图像会发生变化，以便用户知道他所在的部分。根据用户窗口宽度，通过jquery计算图像更改的滚动位置。我在菜单上有一个缓动，所以它的动画从一个部分到另一个部分以及我右上角的图像都在开始时预先加载，并且还进行了硬编码（http://karpouzaki.com/easing/img/image.png）在我的CSS和也在jQuery的功能发生的图像替换。 这是我在我的头部分：

<link media="screen" type="text/css" href="css/reset.css" rel="stylesheet"> 
<link media="screen" type="text/css" href="css/style.css" rel="stylesheet"> 
<link media="screen" type="text/css" href="fonts.css" rel="stylesheet"> 
<link href="css/media-queries.css" rel="stylesheet" type="text/css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type='text/javascript' src="js/jquery.easing.1.3.js"></script> 
<script type='text/javascript' src="js/hscroll.js"></script> 
<script type="text/javascript" src="js/function.js"></script> 
<script type="text/javascript" src="yoxview/yoxview-init.js"></script> 
<script type="text/javascript"> 

$.each(["http://karpouzaki.com/easing/img/naboutus.png","http://karpouzaki.com/easing/img/nwhatwedo.png","http://karpouzaki.com/easing/img/ntheory.png","http://karpouzaki.com/easing/img/nportfolio.png","http://karpouzaki.com/easing/img/nclients.png","http://karpouzaki.com/easing/img/ncontacts.png"],function(i,url){ 
var img = new Image(); 
img.src = url; 
}); 
$(window).load(function(){ 
sitewidths(); 
    scpos(); 
multibgpos(); 
$(window).resize(function() { 
    sitewidths(); 
    scpos(); 
multibgpos(); 
}) 
.resize();//trigger the resize event on page load 
}); 
</script> 

这些都是我的功能，其中网页的宽度与图像替换，也为内容部分之间的动画滚动位置沿计算

$(function() { 
    $('div.navigation a , div.footleft a').bind('click',function(event){ 
     var $anchor = $(this); 

     /*if you want to use one of the easing effects: 
     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, 1500,'easeInOutExpo'); 
     */ 
     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, 1500,'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
}); 
var scpos = function(){ 
$(window).scroll(function(){ 
    var wwidth = $(window).width(); 
    var spos1 = wwidth - 355; 
    var spos2 = spos1+wwidth; 
    var spos3 = spos2 + wwidth; 
    var spos4 = spos3 + wwidth + $('.rightporto').width(); 
    var spos5 = spos4 + wwidth + $('.leftclients').width(); 
    if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() < spos1)){ 
       $(".step").css('background','url(http://karpouzaki.com/easing/img/naboutus.png) 94% 5% no-repeat fixed'); 
       } else if(($(window).scrollLeft() >= spos1)&& ($(window).scrollLeft() < spos2)){ 
        $(".step").css('background','url(http://karpouzaki.com/easing/img/nwhatwedo.png) 94% 5% no-repeat fixed'); 
       } else if(($(window).scrollLeft() >= spos2)&& ($(window).scrollLeft() < spos3)){ 
        $(".step").css('background','url(http://karpouzaki.com/easing/img/ntheory.png) 94% 5% no-repeat fixed'); 
       } else if(($(window).scrollLeft() >= spos3)&& ($(window).scrollLeft() < spos4)){ 
        $(".step").css('background','url(http://karpouzaki.com/easing/img/nportfolio.png) 94% 5% no-repeat fixed'); 
       } else if(($(window).scrollLeft() >= spos4)&& ($(window).scrollLeft() < spos5)){ 
        $(".step").css('background','url(http://karpouzaki.com/easing/img/nclients.png) 94% 5% no-repeat fixed'); 
       }else { 
        $(".step").css('background','url(http://karpouzaki.com/easing/img/ncontacts.png) 94% 5% no-repeat fixed'); 
       } 
     }); 
}; 
var sitewidths = function(){ 
$(function(){ 
    var dwidth = $(window).width(); 
    var dportowidth = dwidth + $('.rightporto').width(); 
    var dclientwidth = dwidth + $('.rightclients').width(); 
    var cw = $(".rightclients").width(); 
    var bdwidth = (dwidth * 4) + dportowidth + dclientwidth; 
    var mrportclients = Number(($(window).width() * 0.05)); 
     $('body').css("width" , bdwidth); 
     $(".multiplebgs .habout").css("width",dwidth); 
     $(".multiplebgs .hwhatwedo").css("width",dwidth); 
     $(".multiplebgs .htheory").css("width",dwidth); 
     $(".multiplebgs .hportfolio").css("width", dportowidth); 
     $(".multiplebgs .hclients").css("width", dclientwidth); 
     $(".multiplebgs .hcontacts").css("width",dwidth); 
     $(".portofolio").css("margin-right" , mrportclients); 
     $('#content4 .cbox').css('margin-right' , mrportclients); 
     $(".clients").css("margin-right" , mrportclients); 
     $('#content5 .cbox').css('margin-right' , mrportclients); 
    }); 
}; 
var multibgpos = function(){ 
$(function(){ 
    var pwwidth = $(window).width(); 
     var pwheight = $(window).height(); 
    var bg1posx = $('.leftporto').outerWidth() - $('.portofolio').width(); 
    var hawd = ($(window).width() * 0.05); 
    var wasd = $('.yoxview').css('margin-top').replace('px', ''); 
    var bg1posy = pwheight - $('.footer').height(); 
    var bg2posx = $('.leftporto').outerWidth() - Number(($(window).width()) * 0.05); 

    var bg2posy = Number(hawd) + Number(wasd);  
$('#content4').css('background-position', bg1posx+'px '+'bottom, '+bg2posx+'px '+bg2posy+'px '); 
    }); 
}; 

该网站是：

http://karpouzaki.com/easing/

我已经改变了window.load到document.ready仍然是一样的。我以为这是我的导航链接上的动画仍然没有。我在水平滚动上有一个mousescroll，但当问题发生时我不使用鼠标滚动，所以我排除了这一点。在我看来，无论是用户会话到期，它迫使bg图像再次被重新加载，这就是为什么我的功能消失或出现问题。

有人有什么建议吗？

由于

Answer 1

改变了我的功能和直接添加到它的标题，而不是一个外部函数片和固定本身的问题。 感谢您的帮助