jquery выдает, что изображение иногда исчезает при функции прокрутки окна

У меня странная проблема с 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, все тот же. Я думал это моя анимация, по ссылкам навигации еще ничего. У меня есть прокрутка мыши при горизонтальной прокрутке, но я не использую прокрутку мыши, когда возникает проблема, поэтому я исключил это. Мне просто кажется, что либо срок действия сеанса пользователя истекает, и это приводит к повторной загрузке изображений bg, поэтому они исчезают или что-то не так с моими функциями.

У кого-нибудь есть предложения?

Спасибо


person Chris    schedule 22.02.2012    source источник
comment
Первый $.each вызывается из jQuery $(document).ready(function() { } ? - Не могли бы вы попробовать это так?   -  person aghoshx    schedule 24.02.2012
comment
Хорошо, я попробовал, чтобы посмотреть, что произойдет, хотя у меня уже было это в document.reday, и я протестировал его. Что я сделал сейчас, так это просто поместил предварительный загрузчик или $.each внутри document.ready и оставил остальное снаружи, чтобы посмотреть, работает ли он.   -  person Chris    schedule 24.02.2012
comment
Когда вы динамически добавляете изображения с помощью среды выполнения, селекторы, которые уже определены в $(document).ready, могут не работать. Оберните все функции внутри одной именованной функции и вызовите функцию после загрузки изображений.   -  person aghoshx    schedule 25.02.2012


Ответы (1)


Изменил мою функцию и добавил ее непосредственно в заголовок вместо внешнего листа функций, и проблема устранилась сама собой. Спасибо за помощь

person Chris    schedule 12.03.2012