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

改變了我的功能和直接添加到它的標題，而不是一個外部函數片和固定本身的問題。 感謝您的幫助