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还是一样。我以为是我的动画在导航链接上仍然没有。我有一个水平滚动的鼠标滚动，但当问题发生时我没有使用鼠标滚动，所以我排除了这一点。在我看来，要么用户 session 过期，要么强制背景图像再次重新加载，这就是消失的原因，或者我的功能有问题。

有人有什么建议吗？

谢谢

Answer 1

更改了我的函数并将其直接添加到标题而不是外部函数表中，问题自行解决。感谢您的帮助