Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Смена изображений фона - нет повтора (jquery) 
:(
    Опции темы
dreamReckless
  Дата 26.12.2012, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.12.2011

Репутация: нет
Всего: 0



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

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


Код

<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> 

PM MAIL   Вверх
Arantir
Дата 26.12.2012, 17:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55



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().

Это сообщение отредактировал(а) Arantir - 26.12.2012, 17:22


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
dreamReckless
Дата 26.12.2012, 17:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.12.2011

Репутация: нет
Всего: 0



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

Добавлено через 13 минут и 38 секунд
Arantir, странно но изображение не всегда меняется.. то рывками, то вот как сейчас - снова остановилось... то меняются только две картинки (фона)..
PM MAIL   Вверх
Arantir
Дата 26.12.2012, 17:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55



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


--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
dreamReckless
Дата 26.12.2012, 18:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.12.2011

Репутация: нет
Всего: 0



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


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

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


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

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

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

Это сообщение отредактировал(а) dreamReckless - 26.12.2012, 18:25
PM MAIL   Вверх
Arantir
Дата 26.12.2012, 20:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Рыбак без удочки
**


Профиль
Группа: Участник
Сообщений: 960
Регистрация: 18.11.2012

Репутация: 5
Всего: 55



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

Цитата(dreamReckless @  26.12.2012,  17:13 Найти цитируемый пост)
"$("img#bg").fadeTo(2000,1);" - это вроде, мол картинка изменится в течении 2-секунд?
.fadeTo(время, непрозрачность) - то же самое, что .anіmate({opacity: <значение>}, <время>).

Цитата(dreamReckless @  26.12.2012,  17:13 Найти цитируемый пост)
$("img#bg").fadeOut(2000);" 
То же самое, что fadeTo, но меняет непрозрачность на ноль.

Цитата(dreamReckless @  26.12.2012,  17:13 Найти цитируемый пост)
"$("#image_description").animate({right: '-=150'}, 1000); - это сам процесс анимации?
Да. Первый аргумент - это те css-свойства, которые будут плавно переходить от текущих до указанных.

Цитата(dreamReckless @  26.12.2012,  17:13 Найти цитируемый пост)
и "setTimeout(LoadImages,1000);" - это, таймаут, через который снова ф-ция снова "заработает".
Не "снова". Это не статическая настройка. Эта функция вызовет указанный код (функцию) один раз после указанного времени. В вашем случае эта функция заново вызывается каждый раз при смене картинки. Термин "снова" тут можно применить сугубо  контексте вашего кода.
Существует так же setInterval(<код>, <интервал>), которая вызывает код через каждый интервал времени.

Цитата(dreamReckless @  26.12.2012,  17:13 Найти цитируемый пост)
можно ли сделать, чтобы шли просто по кругу... ?
Код

    // ... ...
    var current = 0;
    // ... ...

    function LoadImages()
    {
        LoadImage(getNext(current, 0, aImages.length))
        
    };

    function getNext(current, min, max)
    {
        if (current == max) 
            return min;
        return ++current;
    };



--------------------
interface Жопа {
    // ATTENTION: has to be implemented by every class of the project for proper project work
}
PM   Вверх
dreamReckless
Дата 27.12.2012, 08:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 16
Регистрация: 4.12.2011

Репутация: нет
Всего: 0



Arantir, спасибо больше!
PM MAIL   Вверх
Aliance
Дата 27.12.2012, 10:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137



Вот это не есть гуд:
Код
$("img#bg")


Вот так гуд:
Код
$("#bg")


Ну и я бы рекомендовал кешировать вызовы одинакового элемента.
PM MAIL WWW ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0894 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.