Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Смена изображений фона - нет повтора (jquery)

Автор: dreamReckless 26.12.2012, 16:59

Доброго времени суток и конечно же всех с Новым Наступающим Годом!!

Подскажите пожалуйста, уже устал мучатся, столкнулся про следующей проблемой - есть скрипт, но после показа всех изображений (фон странички), он останавливается. Как этого избежать?

Код


<img  src="" alt="background" id="bg" style="display:none" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" class="noprint">
    var aImages = new Array();
    var aURL = new Array();
    var aArtists = new Array();
    var iPrev = -1;
    var iRnd = -1;
    
    aImages[0] = "fone2.jpg";
    aImages[1] = "fone3.jpg";
    aImages[2] = "fone4.jpg";
    aImages[3] = "fone1.jpg";
        
    
 
 
    $(document).ready(function() {
 
        $("img#bg").load(function()
            {
                
                $("img#bg").fadeTo(2000,1);
                
                        
                
                setTimeout(function() 
                    {
                        $("#image_description").animate({right: '-=150'}, 1000);
                        $("img#bg").fadeOut(2000);
                        
                        
                        setTimeout(LoadImages,2500);
                    }
                    ,3000);
            }           
        )
    
        
        setTimeout(LoadImages,1000);
        
    });
 
    function LoadImage(iNr)
    {
    
        $("img#bg").attr("src", aImages[iNr]);
      
                            
    };
    
    function LoadImages()
    {
        
        /* Select a random image number and make sure this is not equal to the previous image */
        while(iPrev == iRnd)
        {
            iRnd = Math.floor(Math.random()*aImages.length);
 
        }
        
        /* Show the selected image */
        LoadImage(iRnd);
        
        iPrev = iRnd;
        
    };
</script>

Автор: Arantir 26.12.2012, 17:21

dreamReckless, да все очень-очень просто. Как вы думаете, после загрузки всех изображений будет ли вызываться $("img#bg").load()?
Скажу иначе. Если у вас одна картинка в 10 разных местах, то браузер ее загружает один раз или 10?

В jquery есть метод, который позволяет проверить, загружено ли изображение - $('#img_id').prop('complete'). Возвращает соответственно true/false.

Сделайте вот так:

Код


function LoadImage(iNr)
{
    $("img#bg").attr("src", aImages[iNr]);
    if ($("img#bg").prop('complete'))
    {
        setTimeout(LoadImages,2500);
    };
};

Теперь если картинка окажется уже загруженной, то вызовется таймер для следующей. В противном случае на строке с .prop() будет false и таймер поставится аж на событии .load().

Автор: dreamReckless 26.12.2012, 17:27

Arantir, спасибо большое! пробую..

Добавлено через 13 минут и 38 секунд
Arantir, странно но изображение не всегда меняется.. то рывками, то вот как сейчас - снова остановилось... то меняются только две картинки (фона)..

Автор: Arantir 26.12.2012, 17:56

dreamReckless,у диапазона 0..3 довольно плохое распределение =) То есть рандом тут не даст "красивой" последовательности.
Попробуйте побольше картинок - станет лучше.

Автор: dreamReckless 26.12.2012, 18:13

Arantir, можно ли сделать, чтобы шли просто по кругу... ?

В общем спасибо тебе за то, что помог.
Все работает. Только не совсем понятно, что означает

"$("img#bg").fadeTo(2000,1);" - это вроде, мол картинка изменится в течении 2-секунд?

"$("#image_description").animate({right: '-=150'}, 1000); - это сам процесс анимации?
$("img#bg").fadeOut(2000);"

и "setTimeout(LoadImages,1000);" - это, таймаут, через который снова ф-ция снова "заработает".

В чем я ошибаюсь?

Автор: Arantir 26.12.2012, 20:58

dreamReckless, на сайте jQuery есть полная информация обо всем (он в гугле первый по запросу "jQuery").